如何实现CSS Flex布局中的一列分为三行显示？

在CSS Flex布局中，要实现一列元素分为三行显示，你可以使用`flex-wrap`属性设置主轴上的换行，以及调整`flex-direction`和`flex-basis`或`flex-grow`等属性。

1. 设置`display: flex;`首先确保容器的display属性为flex，以便启用Flexbox布局。
2. 设置`flex-wrap: wrap;`这会让元素开始换行到下一行。
3. 调整`flex-direction:` 如果你想让内容水平方向上从左向右分，设置为`flex-direction: row;`；如果想垂直排列，就设为`flex-direction: column;`。在这个场景下，通常选择`column`因为我们要的是三行。
4. 对于每一项元素，你可以这样做：
- 使用`flex: 1 0 auto;`来分配空间，其中第一个值表示基础大小，第二个值是撑缩比，第三个值默认，项目会占据剩余空间。
- 或者直接指定固定的宽度和高度（如`width: 33.3%; height: auto;`），保证每个部分占总宽度的三分之一。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.item {
  flex: 1 0 100%;
  /* 或者 */
  width: calc(33.3% - margin); /* 添加间距 */
  height: auto;
}