flex布局——最后一行左对齐的实现方式(css功能实现)

在学习了css3之后，经常会用到的布局就是flex布局了。
比如要实现下图的这种布局：

1. 给父级设置display:flex;
2. 实现一行中内容靠边对齐，则需要设置justify-content:space-between;
   这样的话，最后一行不填满的情况下，就会出现下面的问题：
   
   此时则需要对最后一行单独设置了：

下面我分几种情况进行分析：
对应的html部分代码统一如下：

<h2 style="text-align: center">flex布局</h2>
<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

1、5个一行的布局(指定width为数字)

.wrap {
    width: 1100px;
    margin: 20px auto;
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    width: 200px;
    height: 200px;
    background: green;
    margin-bottom: 10px;
}

.item:last-child:nth-child(5n - 1) {
    margin-right: 225px;
}

.item:last-child:nth-child(5n - 2) {
    margin-right: 450px;
}

.item:last-child:nth-child(5n - 3) {
    margin-right: 675px;
}

注意上面的代码：由于class='item' 对应的div标签，宽度是200px,父级的宽度为1100px,则所有的空隙间距是：100px

5个元素有4个空隙，则每个空隙的宽度是25px;
针对最后一行，分有一个元素，有两个元素，有三个元素，有四个元素等；

//当n为1时，5n-1=4，代表是第四个元素，margin-right就是第五个元素的width+1个空隙的宽度
.item:last-child:nth-child(5n - 1) {
    margin-right: 225px;
}
//当n为1时，5n-2=3，代表是第三个元素，margin-right就是第四个元素的width+第五个元素的width+2个空隙的宽度
.item:last-child:nth-child(5n - 2) {
    margin-right: 450px;
}
//当n为1时，5n-3=2，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+第五个元素的width+3个空隙的宽度
.item:last-child:nth-child(5n - 3) {
    margin-right: 675px;
}

2、5个一行的布局(指定width为百分比)

有很多情况下，元素的宽度是百分数，而非固定的数字宽度，此时则需要计算一下

.wrap {
    width: 1100px;
    margin: 20px auto;
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    width: 19%;
    height: 200px;
    background: green;
    margin-bottom: 10px;
}

.item:last-child:nth-child(5n - 1) {
    margin-right: calc(19% + 5% / 4);
}

.item:last-child:nth-child(5n - 2) {
    margin-right: calc(38% + 10% / 4);
}

.item:last-child:nth-child(5n - 3) {
   margin-right: calc(57% + 15% / 4);
}

注意上面的代码：由于class='item' 对应的div标签，宽度是19%,父级的宽度为1100px,则所有的空隙间距是：5%

5个元素有4个空隙，则每个空隙的宽度是5% / 4;
针对最后一行，分有一个元素，有两个元素，有三个元素，有四个元素等；

//当n为1时，5n-1=4，代表是第四个元素，margin-right就是第五个元素的width+1个空隙的宽度
.item:last-child:nth-child(5n - 1) {
    margin-right: calc(19% + 5% / 4);
}
//当n为1时，5n-2=3，代表是第三个元素，margin-right就是第四个元素的width+第五个元素的width+2个空隙的宽度
.item:last-child:nth-child(5n - 2) {
     margin-right: calc(38% + 10% / 4);
}
//当n为1时，5n-3=2，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+第五个元素的width+3个空隙的宽度
.item:last-child:nth-child(5n - 3) {
    margin-right: calc(57% + 15% / 4);
}

3、4个一行的布局(指定width为百分比)

有很多情况下，元素的宽度是百分数，而非固定的数字宽度，此时则需要计算一下

.wrap {
    width: 1100px;
    margin: 20px auto;
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    width: 24%;
    height: 200px;
    background: green;
    margin-bottom: 10px;
}

.item:last-child:nth-child(4n - 1) {
   margin-right: calc(24% + 4% / 3);
}

.item:last-child:nth-child(4n - 2) {
   margin-right: calc(48% + 8% / 3);
}

注意上面的代码：由于class='item' 对应的div标签，宽度是24%,父级的宽度为1100px,则所有的空隙间距是：4%

4个元素有3个空隙，则每个空隙的宽度是25px;
针对最后一行，分有一个元素，有两个元素，有三个元素等；

//当n为1时，4n-1=4，代表是第三个元素，margin-right就是第四个元素的width+1个空隙的宽度
.item:last-child:nth-child(4n - 1) {
   margin-right: calc(24% + 4% / 3);
}
//当n为1时，4n-2=3，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+2个空隙的宽度
.item:last-child:nth-child(4n - 2) {
   margin-right: calc(48% + 8% / 3);
}

4、4个一行的布局(指定width为数字)

.wrap {
    width: 1100px;
    margin: 20px auto;
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    width: 250px;
    height: 200px;
    background: green;
    margin-bottom: 10px;
}

.item:last-child:nth-child(4n - 1) {
   margin-right: 283.3px;
}

.item:last-child:nth-child(4n - 2) {
   margin-right: 566.6px;
}

注意上面的代码：由于class='item' 对应的div标签，宽度是250px,父级的宽度为1100px,则所有的空隙间距是：100px

4个元素有3个空隙，则每个空隙的宽度是100px / 3;
针对最后一行，分有一个元素，有两个元素，有三个元素等；

//当n为1时，4n-1=4，代表是第三个元素，margin-right就是第四个元素的width+1个空隙的宽度
.item:last-child:nth-child(4n - 1) {
   margin-right: 283.3px;
}
//当n为1时，4n-2=3，代表是第二个元素，margin-right就是第三个元素的width+第四个元素的width+2个空隙的宽度
.item:last-child:nth-child(4n - 2) {
   margin-right: 566.6px;
}

上面就是4种情况，但是实际过程中，这样写的话，会比较麻烦，关键是margin-right的数值需要计算。
elementUi中有对应的layout布局可以借用：

layout布局实现flex布局(4个元素一行)

<div style="background:#fff;border:1px solid red;height:200px;">
  <el-row type="flex" :gutter="20">
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"
      ><div class="grid-content bg-purple-light"></div
    ></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    <!-- <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> -->
    <!-- <el-col :span="6"></el-col> -->
  </el-row>
</div>

对应的css代码：

.el-row.el-row--flex {
  flex-wrap: wrap;//这行代码让内容换行展示
  .el-col {
    margin-bottom: 10px;
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

最终实现效果：

但是有个问题，如果一行5个元素，则不太好实现了。
各有利弊吧。完成！！！