flex 布局换行后最后一行左对齐
2020-11-26 本文已影响0人
NemoExpress
如果每一行列数是固定的
【方法一】:模拟 space-between 和间隙,也就是我们不使用 justify-content:space-between 声明在模拟两端对齐效果。中间的 gap 间隙我们使用 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
由于每一列的数目都是固定的,因此,我们可以计算出不同个数列表应当多大的 margin 值才能保证完全左对齐。
例如,假设每行 4 个元素,结果最后一行只有 3 个元素,则最后一个元素的 margin-right 大小是“列表宽度+间隙大小”的话,那最后 3 个元素也是可以完美左对齐的。
然后,借助树结构伪类数量匹配技术(这篇文章“伪类匹配列表数目实现微信群头像 CSS 布局的技巧”中的布局技巧就是借助这种技术实现),我们可以知道最后一行有几个元素。
例如:
-
.list:last-child:nth-child(4n - 1)说明最后一行,要么 3 个元素,要么 7 个元素……
-
.list:last-child:nth-child(4n - 2)说明最后一行,要么 2 个元素,要么 6 个元素……
如果每一子项宽度不固定
有时候,每一个 flex 子项的宽度都是不固定的,这个时候希望最后一行左对齐该如何实现呢?
由于此时间隙的大小不固定,对齐不严格,因此,我们可以直接让最后一行左对齐即可。具体方法有两个:
【方法一】:最后一项 margin-right:auto
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 最后一项margin-right:auto */
.list:last-child {
margin-right: auto;
}
【方法二】:创建伪元素并设置 flex:auto 或 flex:1
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.list {
background-color: skyblue;
margin: 10px;
}
/* 使用伪元素辅助左对齐 */
.container::after {
content: "";
flex: auto; /* 或者flex: 1 */
}