flex 最后一行左对齐

最新推荐文章于 2025-06-06 08:00:51 发布

原创最新推荐文章于 2025-06-06 08:00:51 发布 · 2.4w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#flex #between #最后一行 #两端对齐

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在使用Flex布局实现两端对齐时，如何处理最后一行在列不满情况下保持左对齐的问题。介绍了两种实用方法：通过添加空item和利用伪元素after来解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目布局上要求item两端对齐，而且最后一行在列不满的情况下要求左对齐，使用flex的justify-content: space-between;实现时发现最后一行不能左对齐，而是两端对齐方式，下图不是项目上想要的效果（不使用flex也可以实现，本文仅讨论使用flex实现）

这里写图片描述

在网上查了很多资料，
1.添加几个空item（对我来说最有效的，适用于大多数场景）
根据布局列数添加空item，比如每行最大n列，那么在最后添加n-2个空item即可

<html>
<style>
  .item {
    width: 32%;
    background-color: #00abff;
    height: 60px;
    margin-top: 10px;
  }

  .itemempty {
    height: 0px;
    width: 32%;
  }

  .box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
</style>

<body>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="itemempty"></div>
    <div class="itemempty"></div>
    <div class="itemempty"></div>
  </div>
</body>

</html>

这里写图片描述

2.利于after（适用于每行列数确定的场景）

.box:after {
    content: "";
    flex: auto;
 }