flex 最后一行左对齐

2022年6月21日 209次阅读 来源: erciyuan_nuonuo

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

《flex 最后一行左对齐》

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

.box:after { content: ""; flex: auto; }
    原文作者：erciyuan_nuonuo
    原文地址: https://blog.csdn.net/erciyuan_nuonuo/article/details/71773557
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞