flex 弹性盒子布局:多行 最后一行 左对齐

要在Flex布局（弹性盒子）中实现多行布局的最后一行左对齐，可以使用flex-wrap属性来允许项目换行，并使用justify-content属性来控制水平对齐方式。但是Flexbox本身不提供直接控制最后一行对齐的属性。

为了实现这个效果，可以使用一个小技巧，即在最后一个元素之后添加一个占位元素，该元素的目的是推动其他行到下一行，使最后一行左对齐。这个占位元素应该足够小，不影响布局，并且在样式上设置为不可见。

以下是实现这种效果的示例代码：

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <!-- 添加一个占位项目，以改变对齐方式 -->
  <div class="flex-placeholder"></div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}
 
.flex-item {
  /* 设置内容宽度，模拟实际内容 */
  flex: 0 0 50%; 
  padding: 10px;
  box-sizing: border-box;
}
 
.flex-placeholder {
  flex: 0 0 0; /* 设置占位项目的flex-basis为0，使其不占据空间 */
  visibility: hidden; /* 使占位项目不可见 */
}

在这个例子中，.flex-container是弹性容器，.flex-item是其中的子项。.flex-placeholder是作为最后一个元素添加的占位项目，它将影响前面项目的对齐方式。通过将justify-content属性设置为left，可以确保多行布局中除了最后一行外的所有行都左对齐。由于最后一个占位项目的存在，最后一行的项目会左对齐。