CSS——flex布局最后⼀⾏列表左对齐的N种⽅法⼀、flex布局最后⼀⾏列表左对齐的N种⽅法
效果展⽰：
如果每⼀⾏列数是固定的
如果每⼀⾏列数是固定的，则下⾯两种⽅法可以实现最后⼀⾏左对齐。
⽅法⼀：
也就是我们不使⽤justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使⽤margin进⾏控制。
<div class="container-1">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
.container-1 {
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值才能保证完全左对齐。
.list:last-child:nth-child(4n - 1)说明最后⼀⾏，要么3个元素，要么7个元素……
.list:last-child:nth-child(4n - 2)说明最后⼀⾏，要么2个元素，要么6个元素……
<div class="container-2">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
.container-2 {
display: flex;
/* 两端对齐 */
justify-content: space-between;
flex-wrap: wrap;
.list {
width: 24%; height: 100px;
background-color: skyblue;
margin-top: 15px;
}
/
* 如果最后⼀⾏是3个元素 */
.list:last-child:nth-child(4n - 1) {
margin-right: calc(24% + 4% / 3);
}
/* 如果最后⼀⾏是2个元素 */
.list:last-child:nth-child(4n - 2) {
margin-right: calc(48% + 8% / 3);
}
}
如果每⼀⾏列数不固定
效果展⽰：
如果每⼀⾏的列数不固定，则上⾯的这些⽅法均不适⽤，需要使⽤其他技巧来实现最后⼀⾏左对齐。
这个⽅法其实很简单，也很好理解，就是使⽤⾜够的空⽩标签进⾏填充占位，具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使⽤7个空⽩标签进⾏填充占位，最多10列，那我们需要使⽤10个空⽩标签。
<div class="container-3">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<i></i><i></i><i></i><i></i><i></i>
</div>
.container-3 {
width: 400px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-right: -10px;
.list {
width: 100px; height:100px;
background-color: skyblue;
margin: 15px 10px 0 0;
}
/* i和列表⼀样的宽度和margin值 */
& > i {
width: 100px;
margin-right: 10px;
}
}
如果列数不固定HTML⼜不能调整
然⽽有时候，由于客观原因，前端重构⼈员没有办法去调整html结构，同时布局的列表个数⼜不固定，这个时候该如何实现我们最后⼀⾏左对齐效果呢？
我们不妨可以试试使⽤Grid布局。
Grid布局天然有gap间隙，且天然格⼦对齐排布，因此，实现最后⼀⾏左对齐可以认为是天⽣的效果。
css布局左边固定右边自适应repeat()函数兼容性有些要求，IE浏览器并不⽀持
<div class="container-4">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
.container-4 {
width: 400px;
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 100px);
grid-gap: 10px;
.list {
width: 100px; height:100px;
background-color: skyblue; margin-top: 5px;
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论