1慈俯、 單項(xiàng)目

首先渤刃，只有左上角有1個點(diǎn)的情況。Flex布局默認(rèn)就是首行左對齊贴膘，所以一行代碼就夠啦卖子。

左上角.png

.box {
    display: flex
}

設(shè)置項(xiàng)目的對齊方式，就能實(shí)現(xiàn)居中對齊和右對齊刑峡。

水平居中.png

.box {
  display: flex;
  justify-content: center;
}

設(shè)置交叉軸對齊方式洋闽，可以垂直移動主軸。

垂直居中.png

.box {
  display: flex;
  align-items: center;
}

水平垂直居中.png

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

水平居中底部.png

.box {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

右下角.png

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

2突梦、雙項(xiàng)目

.box {
    display: flex;
    justify-content: space-between;
}

.box {
    display: flex;
    flex-firection: column;
    justify-content: space-between;
}

.box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.box {
    display: flex;
    flex-direction: colunmn;
    justify-content: space-between;
    align-items: flex-end;
}

.box {
    display: flex;
}
.box .item:nth-child(2) {
    align-self: center;
}

.box {
    display: flex;
    justify-content: space-between;
}
.box .item:nth-child(2) {
    align-self: flex-end;
}

3诫舅、三項(xiàng)目

.box {
    display: flex;
    justify-content: space-between;
}
.box .item:nth-child(2) {
    align-self: center;
}
.box .item:nth-child(3) {
    align-self: flex-end;
}

4、四項(xiàng)目

.box {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-content: space-between;
}

html結(jié)構(gòu)為：
<div class="box">
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="column">
    <span class="item"></span>
    <span class="item"></span>
  </div>
</div>

css代碼如下:
.box {
    display: flex;
    flex-warp: warp;
    algin-content: space-between;
}
.box .column {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
}

5宫患、六項(xiàng)目

.box {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.box .column {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
}

.box {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
   align-content: space-between;
}
.box .column {
    flex-basis: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
}

6刊懈、九項(xiàng)目

html結(jié)構(gòu)為:
<div class="box">
    <div class="column">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <div class="column">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <div class="column">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>

css代碼為：
.box {
    display: flex;
    flex-warp: warp;
    justify-content: space-between;
}
.box .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}