flex 弹性盒子布局多行最后一行左对齐的两种解决方式

在Flex布局中，如果要实现多行布局并且最后一行的项目左对齐，可以使用两种方法：

1. 使用justify-content: space-between和align-content: flex-start。
2. 使用margin-right: auto在最后一行的项目上。

以下是具体的实现代码：

方法1：使用justify-content: space-between

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- ... -->
</div>

方法2：使用margin-right: auto

.container {
  display: flex;
  flex-wrap: wrap;
}
.container > div:last-child {
  margin-right: auto;
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <!-- ... -->
</div>

两种方法都能实现多行Flex布局中最后一行左对齐的效果。选择哪种方法取决于具体布局需求和个人偏好。