css-flex布局 space-between最后一行向左对齐

最新推荐文章于 2024-06-13 21:20:19 发布

卫龙~

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量175

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_42889888/article/details/138817372

版权

首先我们实现的是如下图

<template>
  <div class="father">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.father {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .child {
    width: calc(100% / 3 - 30px);
    height: 100px;
    margin-bottom: 10px;
    border: 1px solid yellow;
  }
}
</style>

但是我们想要的是最后一行最后一个是在中间那列的下面，而不是在第三列的下面，所以改良后的是如下（加了 gap，和伪元素）

<template>
  <div class="father">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.father {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
  gap: 45px;

  &::after {
    content: "";
    flex: auto;
  }
  .child {
    width: calc(100% / 3 - 30px);
    height: 100px;
    border: 1px solid yellow;
  }
}
</style>