flex 最后一行左对齐

最新推荐文章于 2024-06-12 16:48:27 发布

原创最新推荐文章于 2024-06-12 16:48:27 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flex #grid

工作常见问题同时被 2 个专栏收录

20 篇文章

订阅专栏

css

10 篇文章

订阅专栏

本文介绍了一种解决Flex换行后列表数量不确定问题的方法，即利用Grid布局。Grid布局能自然创建间距并保持元素对齐，通过设置`justify-content: space-between;`，`grid-template-columns: repeat(auto-fill, 200px);`和`grid-gap: 10px;`，可以轻松实现最后一行左对齐的效果，简化了调试HTML的复杂性。

场景：

无法确定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 {
            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;
            }
        }

grid: