Flex布局最后一行元素的对齐的解决方案
问题的产生
使用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);
}
每一行的最后一个元素是没有外边距的
还有很多其他方法，或者使用grid布局，最简单容易得应该就是在末尾补充元素，够用就行。