当前位置：首页 > news >正文

Flex布局最后一行元素的对齐的解决方案

news 2025/6/30 16:00:14

问题的产生

使用Flex布局，设置justify-content: space-between;让元素在主轴上两队对齐。

 <div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div></div>

      .box {display: flex;flex-wrap: wrap;justify-content: space-between;width: 500px;border: 1px solid red;}.item {width: 120px;height: 100px;margin-bottom: 10px;background-color: aquamarine;}

假如一行显示4个元素，最后一行在不够4个元素的时候，按照两端对齐显示，效果显得不好，我们希望假如最后一行不足4个元素的时候，默认从左向右排列。
在这里插入图片描述

解决方法

这个问题有很多的解决方法，先说最简单也是最常用，兼容性最好的一种。

1. 使用`i`或者`span`补齐

假如我们这里一行最多显示4个元素，我们就再列表项的末尾补充4个i元素。

    <div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><!-- 补充4个i元素 --><i></i><i></i><i></i><i></i></div>

同时设置css样式：

      .box {display: flex;flex-wrap: wrap;justify-content: space-between;width: 500px;border: 1px solid red;}.item {width: 120px;height: 100px;margin-bottom: 10px;background-color: aquamarine;}/* 针对i元素的样式 */.box i {width: 120px;height: 0;}

显示效果为：
在这里插入图片描述

这种方式的原理是：
首先末尾的4个元素宽度和列表项一致，但是高度为0，我们先设置高度不为0看下效果：

      /* 针对i元素的样式 */.box i {width: 120px;height: 30px;background-color: brown;}

四个元素其中一个充当了之前最后一行的末尾元素，剩下的3个元素按照两端对齐，显示在下一行，此时高度设置为0，元素不显示，也不会多占据一行，但是可以在主轴方向上填补之前的空白区域。
在这里插入图片描述
为什么需要4个，当然是为了考虑到最后一行可能剩2，3的情况。

如果最后一行剩一个元素，默认会左对齐，如果剩4个元素，那就是正好两端对齐，所以我们需要考虑的就是剩2个或者3个的情况，但是为了统一，直接放置4个在末尾，高度为0，也不会占据高度，只是会额外的创建html元素。

2. 使用Css选择器

还是使用flex布局，使用justify-content: space-between;，不额外创建html元素。我们假设一行只显示4个元素，根据上一节，我们只需要考虑处理剩2个或者3个元素的情况。

这里我们的每个列表项的宽度使用%单位、

    <div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div></div>

      * {box-sizing: border-box;margin: 0;padding: 0;list-style: none;}.box {width: 500px;/* 父元素设置高度，子元素会默认拉伸 */display: flex;flex-wrap: wrap;justify-content: space-between;background-color: lightslategray;}.item {width: 24%;height: 100px;margin-bottom: 5px;background-color: bisque;}

在这里插入图片描述
我们通过css选择器，选中最后一个元素，设置他的margin-right，

/*一行4个元素，4n就是选中第4,8,12个元素...,n从0开始，相当于选中每一行的第4个，但是我们要选中的是每一行的第3个，所以就有了4n-1但是考虑到只针对最后一行，就有了下面的选择器是最后一个元素的同时 还是每一行中的第三个
*/.item:last-child:nth-child(4n - 1) {margin-right: calc(24% + 4% / 3);}

宽度：由于每一个item元素没有设置margin,item宽度为24%，一行4个，就是96%，还剩4%的空白空间，这4%的空白空间平均分成了3分，才有了下面的间距
在这里插入图片描述
针对最后一行的最后一个元素即7号，它应该和3号元素对齐：

24%是一个元素的空间，再加上原本的间距
margin-right: calc(24% + 4% / 3);

在这里插入图片描述

同样针对剩2个元素的情况，可以有如下的选择器：

      .item:last-child:nth-child(4n - 2) {margin-right: calc(48% + 8% / 3);}

6号和2号对齐，右侧的空间是24% * 2 + 4% / 3 * 2 ，即48% + 8% / 3
在这里插入图片描述
所以我们有了下面的代码

    <div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div></div>

      * {box-sizing: border-box;margin: 0;padding: 0;list-style: none;}.box {width: 500px;display: flex;flex-wrap: wrap;justify-content: space-between;background-color: lightslategray;}.item {width: 24%;height: 100px;margin-bottom: 5px;background-color: bisque;}.item:last-child:nth-child(4n - 2) {margin-right: calc(48% + 8% / 3);}.item:last-child:nth-child(4n - 1) {margin-right: calc(24% + 4% / 3);}

不使用justify-content:space-between

在模拟两端对齐效果，中间的gap间隙我们使用margin进行控制。

    <div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div></div>

      .box {display: flex;flex-wrap: wrap;width: 500px;border: 1px solid red;}.item {width: 120px;height: 100px;/*先统一设置mr*/margin-right: calc(20px / 3);margin-bottom: 10px;background-color: aquamarine;}/*每行的最后一个不设置mr*/.item:nth-child(4n) {margin-right: 0;}

或者直接选中除了每一行最后一个元素外的其他元素：

      .item {width: 120px;height: 100px;margin-bottom: 10px;background-color: aquamarine;}/*选择每一行非第4个元素，设置外边距但是外边距的值需要计算出来,或者使用%单位
*/.item:not(:nth-child(4n)) {margin-right: calc((500px - 120px * 4) / 3);}