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间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。

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;
            }
        }