flex布局对齐方式设置space-between，将最后一行元素左对齐

作者：System 时间：2024年08月10日分类：所有,css3 字数：491

在Flex布局中，如果你想要使用space-between对齐方式，并且让最后一行的元素左对齐，你可以使用以下的CSS样式：




.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.item {
  /* 定义每个元素的宽度和其他样式 */
}

HTML结构可能如下所示：




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- ... 更多的item元素 -->
</div>

这样设置后，最后一行的元素会尽可能地靠左排列，同时两端的元素间隔均匀分布。在多行的情况下，除了最后一行，所有行的元素都会根据justify-content: space-between的规则进行对齐。