完美解决flex布局中space-between最后一行不居左对齐问题

完美解决flex布局中space-between最后一行不居左对齐问题

展示效果

问题解决前

在这里插入图片描述
在这里插入图片描述

问题解决后

在这里插入图片描述
在这里插入图片描述

直接贴代码(.vue文件)


// html
<template>
  <div class="warp">
    <div v-for="(item, index) in dataList" :key="index" class="item">{{ item }}</div>
    <!-- 处理最后一行不居左对齐问题 width需要设置为与上方div等宽 高固定为零 循环的数字(这里是10)由最大屏宽时上方div一行能展示多少个决定 比如最大屏宽最多6个一行 则为6 也可以像我这样给个稍大点的值 -->
    <div style="width: 190px; height: 0" v-for="n in 10" :key="n"></div>
  </div>
</template>
<script>
export default {
  data: () => ({
    dataList: [
      '内容000',
      '内容111',
      '内容222',
      '内容333',
      '内容444',
      '内容555',
      '内容666',
      '内容777',
      '内容888',
      '内容999',
    ],
  }),
}
</script>
<style lang="scss" scoped>
.warp {
  width: 900px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item {
  margin: 20px 0;
  width: 190px;
  height: 60px;
  border-radius: 4px;
  background-color: green;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
</style>


原理

原本justify-content: space-between不能完美排列,就是因为排列的盒子数量不够,所以我们再数据循环完毕后,再添加10个高度为零,与排列项等宽的盒子,就能让justify-content: space-between继续生效,而由于添加的盒子没有高度,所以在页面中不会显示,就达到了我们想要的效果。

这个方式用做矩阵布局,就非常完美了,既能自适应屏幕宽,也能解决掉最后一行的排列问题。

ps:我和同事写项目的时候,一起碰到了这个问题,然后各种网上找解决方案,都不太满意。我思考出来的这个解决方案是网上没有的,不过我也是借鉴了网上的解决方案,他们是添加一个等宽零高的伪元素:after放在最后,但是这样处理,如果一行排列的项超过了3个,就不行了,我这里的改进其实就是从添加一个,变成添加很多个(比如10个),这样就算一行超过3个,也能完美解决。

找到解决方案那时候,确实还是很开心的,这里分享出来给大家,希望对你们有所帮助~

这是我的第二遍博客,距离上一篇一年多点,新冠疫情在中国控制的非常好,这一年多看疫情在世界范围肆虐,由衷感到咱们国家是真的强大了,尤其前几天的中美对话,中国已经开始平视世界了~

  • 42
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 17
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值