flex 布局使用 space-between 时将最后一行左对齐

1.使用占位元素

特点:适用于任意列数布局,比较简单,缺点是会产生空标签

方法:使用循环体循环一整行空元素。宽度为单个元素宽度,高度为0

html 复制代码
<div class="flex-box">
  <div class="item-box" v-for="item in 4" :key="item"></div>
  <!-- 假设一行有3列,即3个元素 -->
  <div v-for="temp in 3" :key="temp + 't'" class="temp-box"></div>
</div>
css 复制代码
.flex-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-box .item-box {
  width: 30%;
  height: 200px;
  margin-bottom: 20px;
  background: pink;
}
.flex-box .temp-box {
  width: 30%;
  height: 0;
  margin: 0;
}

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

特点:只针对三列布局

方法:通过 ::after 选择器,给父元素添加伪元素

html 复制代码
<div class="flex-box">
  <div class="item-box" v-for="item in 5" :key="item"></div>
</div>
css 复制代码
.flex-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-box .item-box {
  width: 30%;
  height: 200px;
  margin-bottom: 20px;
  background: pink;
}
.flex-box:after {
  content: '';
  width: 30%;
}

3.计算方式

特点:适用于每一行列数固定,且列宽度固定,需要进行计算,相比较复杂

方法:对于最后一行的元素动态设置 margin-right。判断如果最后一个元素处于当前列,会发生布局错乱,则设置元素的 margin-right 为剩余空间的大小(剩余列宽度 + 剩余间隙大小)。假设元素宽度是 width,总间隙是 space(盒子宽度 - 元素宽度 * 列数)

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

三列布局

计算公式:宽度为30%,则剩余间隙:100% - 30% * 3 = 10%

html 复制代码
<div class="flex-box-3">
  <div class="item-box" v-for="item in 5" :key="item"></div>
</div>
css 复制代码
/* 计算方式(三列布局) */
.flex-box-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-box-3 .item-box {
  width: 30%;
  height: 200px;
  margin-bottom: 20px;
  background: pink;
}
/* 三列布局:宽度为30%,则剩余间隙:100% - 30% * 3 = 10% */
/* 最后一行是2个元素 */
.flex-box-3 .item-box:last-child:nth-child(3n - 1) {
  margin-right: calc(10% / 2 * 1 + 30% * 1);
}

四列布局

计算公式:宽度为22%,则剩余间隙:100% - 22% * 4 = 12%

html 复制代码
<div class="flex-box-4">
  <div class="item-box" v-for="item in 5" :key="item"></div>
</div>
css 复制代码
/* 计算方式(四列布局) */
.flex-box-4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-box-4 .item-box {
  width: 22%;
  height: 200px;
  margin-bottom: 20px;
  background: pink;
}
/* 四列布局:宽度为22%,则剩余间隙:100% - 22% * 4 = 12% */
/* 最后一行是2个元素 */
.flex-box-4 .item-box:last-child:nth-child(4n - 2) {
  margin-right: calc(12% / 3 * 2 + 22% * 2);
}
/* 最后一行是3个元素 */
.flex-box-4 .item-box:last-child:nth-child(4n - 1) {
  margin-right: calc(12% / 3 * 1 + 22% * 1);
}

五列布局

计算公式:宽度为18%,则剩余间隙:100% - 18% * 5 = 10%

html 复制代码
<div class="flex-box-5">
  <div class="item-box" v-for="item in 7" :key="item"></div>
</div>
css 复制代码
/* 计算方式(五列布局) */
.flex-box-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-box-5 .item-box {
  width: 18%;
  height: 200px;
  margin-bottom: 20px;
  background: pink;
}
/* 五列布局:宽度为18%,则剩余间隙:100% - 18% * 5 = 10% */
/* 最后一行是2个元素 */
.flex-box-5 .item-box:last-child:nth-child(5n - 3) {
  margin-right: calc(10% / 4 * 3 + 18% * 3);
}
/* 最后一行是3个元素 */
.flex-box-5 .item-box:last-child:nth-child(5n - 2) {
  margin-right: calc(10% / 4 * 2 + 18% * 2);
}
/* 最后一行是4个元素 */
.flex-box-5 .item-box:last-child:nth-child(5n - 1) {
  margin-right: calc(10% / 4 * 1 + 18% * 1);
}

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

相关推荐
我是华为OD~HR~栗栗呀21 分钟前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
yy76349666823 分钟前
WPF 之 简单高效的Revit多语言支持方案
java·大数据·linux·服务器·wpf
我是华为OD~HR~栗栗呀23 分钟前
华为od面经-23届-Java面经
java·c语言·c++·python·华为od·华为·面试
β添砖java1 小时前
vivo响应式官网
前端·css·html·1024程序员节
青云交5 小时前
Java 大视界 -- 基于 Java 的大数据机器学习模型在图像识别中的迁移学习与模型优化
java·大数据·迁移学习·图像识别·模型优化·deeplearning4j·机器学习模型
2501_909800815 小时前
Java 集合框架之 Set 接口
java·set接口
断剑zou天涯5 小时前
【算法笔记】暴力递归尝试
java·笔记·算法
web打印社区6 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗6 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
Nobody_Cares6 小时前
JWT令牌
java