vue末行左对齐_让CSS flex布局最后一行列表左对齐的N种方法(小结)

引用张鑫旭的一篇文章分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。

问题描述

//html

//css

.container {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.list {

width: 24%; height: 100px;

background-color: skyblue;

margin-top: 15px;

}

这种情况明显与我们想要的情况不同。

行数固定解决方法

方法一 用margin 模拟缝隙

比如

.container {

display: flex;

flex-wrap: wrap;

}

.list {

width: 24%; height: 100px;

background-color: skyblue;

margin-top: 15px;

}

.list:not(:nth-child(4n)) {

margin-right: calc(4% / 3);

}

样式如下

方法二 根据最后一行个数确定margin

由于每一列的数目都是固定的，因此，我们可以计算出不同个数列