flex垂直布局固定列数

Flexbox布局是一种现代CSS弹性盒模型，用于二维布局。如果你想在垂直方向上设置一个固定的列数，可以利用`flex-direction`属性将主轴设置为`column`（默认值是`row`，水平方向），然后使用`grid-template-columns`类似的功能，如果使用的是CSS Grid的话。

对于Flex布局来说，没有直接对应于Grid的`grid-template-columns`的概念。但是，你可以通过计算行高（line-height）并配合`flex-basis`或`min-width`属性来模拟。例如：

.container {
  display: flex;
  flex-direction: column; /* 设置为主轴为垂直 */
  align-items: flex-start; /* 可选，决定项目如何对齐 */
}

.column-boxes {
  display: flex;
  flex-wrap: wrap; /* 强制换行以便适应列数 */
  max-width: calc(100% / <number_of_columns>); /* 将宽度平均分配给每个固定列 */
  justify-content: space-between; /* 可选，调整列之间的间隔 */
}

在这里，`<number_of_columns>`是你想要的固定列数，比如你想有3列，就替换为`3`。

需要注意的是，这种方法并不是真正意义上的固定列数，因为浏览器会根据内容自适应调整列宽。如果需要严格的固定列宽，那么CSS Grid可能是更好的选择。