flex布局对齐方式设置space-between，将最后一行元素左对齐
给盒子设置 justify-content: space-between ， 可以均匀排列盒子中的每个元素，首个元素放置于起点，末尾元素放置于终点。达到左右对齐的效果。
但当最后一行元素不能铺满盒子时，会在盒子中均分排列，效果并不是我们需要的。
盒子设置flex布局， 对齐方式设置 justify-content: space-between时，将最后一行元素左对齐，有一下几种方法：
1. 使用占位元素：
特点：适用于任意列数布局，比较简单，缺点是会产生空标签 方案：使用循环体循环一整行空元素。宽度为单个元素宽度，高度为0
code
html
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
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），按照比例放大
精彩内容
您阅读本篇文章共花了：
发表评论