小柒

www.xiaoqi.cn

0%

实现flex盒子最后一行左对齐

发表于 分类于

问题：

在CSS flex布局中，justify-content属性可以控制列表的水平对齐方式，例如space-between值可以实现两端对齐。

但是，如果最后一行的列表的个数不满，则就会出现最后一行没有完全垂直对齐的问题。

解决：

每一行固定列数：

方法一：模拟space-between和间隙

也就是我们不使用justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    .list {
        width: 24%;
        height: 100px;
        background-color: skyblue;
        margin-top: 15px;
    }
    .list:not(:nth-child(4n)) {
        /* 100%-24%*4=4%,4%/3分配给不是4的倍数的盒子 */
        margin-right: calc(4%/3)
    }
</style>
<body>
    <div class="container">
        <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>
    
</body>

方法二：根据个数最后一个元素动态margin

由于每一列的数目都是固定的，因此，我们可以计算出不同个数列表应当多大的margin值才能保证完全左对齐。

例如，假设每行4个元素，结果最后一行只有3个元素，则最后一个元素的margin-right大小是“列表宽度+间隙大小”的话，那最后3个元素也是可以完美左对齐的。

然后，借助树结构伪类数量匹配技术，我们可以知道最后一行有几个元素。

例如：

  • .list:last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素……
  • .list:last-child:nth-child(4n - 2)说明最后一行，要么2个元素，要么6个元素……

在本例中，一行就4个元素，因此，我们可以有如下CSS设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
        display: flex;
        flex-wrap: wrap;
    }
    .list {
        width: 24%;
        height: 100px;
        background-color: skyblue;
        margin-top: 15px;
        /* 每个的margin-right默认为4%/3 */
        margin-right: calc(4%/4);
    }
    /* 最后一行3个 则最后一个的margin-right特殊设置*/
    .list:last-child:nth-child(4n-1) {
        margin-right: calc(24%+4%/3)
    }
    /* 最后一行两个 */
    .list:last-child:nth-child(4n-2){
        margin-right: calc(48%+8%/3) ;
    }

子项宽度不固定

最后一项margin-right:auto

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    bacground-color: skyblue;
    margin: 10px;
}
/*最后一项margin-right:auto,让margin-right占据剩余空间*/
.list:last-child {
    margin-right:auto;
}

创建伪元素占据剩余空间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .list {
        height: 100px;
        background-color: skyblue;
        margin: 10px;
    }
    .container::after {
        content:'';
        flex:1;
    }

如果每一行列数不固定

如果每一行的列数不固定，则上面的这些方法均不适用，需要使用其他技巧来实现最后一行左对齐。

这个方法其实很简单，也很好理解，就是使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。

如下HTML示意：

1
2
3
4
5
6
7
8
9
10
1<div class="container">
2    <div class="list"></div>
3    <div class="list"></div>
4    <div class="list"></div>
5    <div class="list"></div>
6    <div class="list"></div>
7    <div class="list"></div>
8    <div class="list"></div>
9    <i></i><i></i><i></i><i></i><i></i>
10</div>

相关CSS如下，实现的关键就是占位的<i>元素宽度和margin大小设置得和.list列表元素一样即可，其他样式都不需要写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1.container {
2    display: flex;
3    justify-content: space-between;
4    flex-wrap: wrap;
5    margin-right: -10px;
6}
7.list {
8    width: 100px; height:100px;
9    background-color: skyblue;
10    margin: 15px 10px 0 0;
11}
12/* 和列表一样的宽度和margin值 */
13.container > i {
14    width: 100px;
15    margin-right: 10px;
16}

由于<i>元素高度为0，因此，并不会影响垂直方向上的布局呈现。

如果列数不固定HTML又不能调整

然而有时候，由于客观原因，前端重构人员没有办法去调整html结构，同时布局的列表个数又不固定，这个时候该如何实现我们最后一行左对齐效果呢？

我们不妨可以试试使用Grid布局。

Grid布局天然有gap间隙，且天然格子对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。

CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    .container {
        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;
    }   
</style>

这几种实现方法点评

首先最后一行需要左对齐的布局更适合使用CSS grid布局实现，但是，repeat()函数兼容性有些要求，IE浏览器并不支持。如果项目需要兼容IE，则此方法需要斟酌。

然后，适用范围最广的方法是使用空的元素进行占位，此方法不仅适用于列表个数不固定的场景，对于列表个数固定的场景也可以使用这个方法。但是有些人代码洁癖，看不惯这种空的占位的html标签，则可以试试一开始的两个方法，一是动态计算margin，模拟两端对齐，另外一个是根据列表的个数，动态控制最后一个列表元素的margin值实现左对齐。