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

在学习了css3之后，经常会用到的布局就是flex布局了。

比如要实现下图的这种布局：

给父级设置display:flex;实现一行中内容靠边对齐，则需要设置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个元素一行)

对应的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个元素，则不太好实现了。

各有利弊吧。完成！！！