flex布局对齐方式设置space-between，将最后一行元素左对齐

flex布局对齐方式设置space-between，将最后一行元素左对齐

给盒子设置 justify-content: space-between ， 可以均匀排列盒子中的每个元素，首个元素放置于起点，末尾元素放置于终点。达到左右对齐的效果。

但当最后一行元素不能铺满盒子时，会在盒子中均分排列，效果并不是我们需要的。

盒子设置flex布局， 对齐方式设置 justify-content: space-between时，将最后一行元素左对齐，有一下几种方法：

1. 使用占位元素：

特点：适用于任意列数布局，比较简单，缺点是会产生空标签
方案：使用循环体循环一整行空元素。宽度为单个元素宽度，高度为0

code

html

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <!-- 假设一行有5列，即5个元素 -->
  <li v-for="item in 5" :key="item" class="temp"></li>
</ul>

css

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

li {
  width: 18%;
  margin-bottom: 20px;
  height: 200px;
  background: pink;
}

.temp { 
  width: 18%; 
  height: 0; 
  margin: 0; 
} 

效果

2. 给父级元素后面添加伪元素

特点：只针对三列布局
方案：通过 ::after 选择器，给父元素添加伪元素

code

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

css

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

li {
  width: 30%;
  margin-bottom: 20px;
  height: 200px;
  background: pink;
}

ul:after { 
  content: ''; 
  width: 30%;
}

效果

3. 计算方式

特点：适用于每一行列数固定，且列宽度固定，需要进行计算，相比较复杂
方案： 对于最后一行的元素动态设置margin-right。判断如果最后一个元素处于当前列，会发生布局错乱，则设置元素的 margin-right 为剩余空间的大小（剩余列宽度+剩余间隙大小）。假设元素宽度是$width，总间隙是 $space（盒子宽度-元素宽度*列数）。

计算公式： margin-right: calc( ($space / 间隙数) * 剩余列数 + $width * 剩余列数 )

三列布局

计算方法：

最后一个元素所处列数	剩余空间	margin-right
第二列（li:last-child:nth-child(3n - 1)）	第三个元素宽度+剩余间隙	($space / 2) * 1 + $width * 1

code

/* 三列布局，li宽度为30%，则剩余间隙：100% - 30% * 3 = 10% */
/* 如果最后一行是2个元素 calc(10% / 2 * 1 + 30% * 1) 可简化 */
ul>li:last-child:nth-child(3n - 1) { margin-right: calc(10% / 2 + 30%) }

四列布局

计算方法：

最后一个元素所处列数	剩余空间	margin-right
第二列（li:last-child:nth-child(4n - 2)）	第三个元素宽度+第四个元素宽度+剩余间隙	($space / 3) * 2 + $width * 2
第三列（li:last-child:nth-child(4n - 1)）	第四个元素宽度+剩余间隙	($space / 3) * 1 + $width * 1

code

/* 四列布局，li宽度为22%，则剩余间隙：100% - 22% * 4 = 12% */
/* 如果最后一行是2个元素 calc(12% / 3 * 2 + 22% * 2) 可简化 */
ul>li:last-child:nth-child(4n - 2) { margin-right: calc(24% / 3 + 44%) }
/* 如果最后一行是3个元素 calc(12% / 3 * 1 + 22% * 1) 可简化 */
ul>li:last-child:nth-child(4n - 1) { margin-right: calc(12% / 3 + 22%) }

5列布局

计算方法：

最后一个元素所处列数	剩余空间	margin-right
第二列（li:last-child:nth-child(5n - 3)）	第三个元素宽度+第四个元素宽度+第五个元素宽度+剩余间隙	($space / 4) * 3 + $width * 3
第三列（li:last-child:nth-child(5n - 2)）	第四个元素宽度+第五个元素宽度+剩余间隙	($space / 4) * 2 + $width * 2
第四列（li:last-child:nth-child(5n - 1)）	第五个元素宽度+剩余间隙	($space / 4) * 1 + $width * 1

code

/* 五列布局，li宽度为18%，则剩余间隙：100% - 18% * 5 = 10% */

/* 如果最后一行是2个元素 calc(10% / 4 * 3 + 18% * 2) 可简化 */
ul>li:last-child:nth-child(5n - 3) { margin-right: calc(30% / 4 + 54%) }
/* 如果最后一行是3个元素 calc(10% / 4 * 2 + 18% * 2) 可简化 */
ul>li:last-child:nth-child(5n - 2) { margin-right: calc(20% / 4 + 36%) }
/* 如果最后一行是4个元素 */
ul>li:last-child:nth-child(5n - 1) { margin-right: calc(10% / 4 + 18%) }

依次类推，当列数为6、7、8 …时，同样按照上述方式计算

flex布局其余知识了解

1. 部分元素被挤压的解决方法 flex-shrink: 0

概念：父元素宽度小于子元素宽度之和时，子元素如何缩小自己的宽度
取值：默认为1，值越大，缩小的越多；值为0，不缩小

2. 父元素剩余空间分配问题 flex-grow：1

概念：父元素宽度大于子元素宽度之和时，子元素如何分配父元素剩余空间
取值：默认为0，即使存在剩余空间，也不放大；为其他值时（Number），按照比例放大