flex最后⼀⾏左对齐如何实现
场景 ： ⽆法确定flex 换⾏后列表个数⼜不固定，直接调试html特别⿇烦，使⽤Grid布局
Grid布局天然有gap间隙，且天然格⼦对齐排布，因此，实现最后⼀⾏左对齐可以认为是天⽣的效果。
<div class="box">
<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>
.box {
flex布局对齐方式width: 200px;
display: grid;
justify-content: space-between;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 10px;
.list {
width: 100px; height:100px;
background-color: skyblue;
margin-top: 5px;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。