flex 一行3个 左对齐

可以使用 flex 布局中的 `justify-content` 属性和 `flex-wrap` 属性实现一行3个左对齐的效果。代码如下：

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
</div>

CSS:

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

.item {
  flex-basis: 33.33%;
  text-align: left;
}

解释：

- `flex-wrap: wrap` 属性使得 flex 容器内的项目可以换行；
- `justify-content: flex-start` 属性将项目左对齐；
- `flex-basis: 33.33%` 属性将每个项目的宽度设置为 33.33% ，即一行显示 3 个项目。同时，由于使用了 `flex-wrap: wrap` 属性，当容器宽度不足以一行显示 3 个项目时，项目会自动换行，而不是挤在一行上。