通过设置flex-direction: column、flex-wrap: wrap和align-content，可实现Flexbox容器内子元素按列多行排列并控制列间对齐方式。
通过设置flex-direction: column、flex-wrap: wrap和align-content，可实现Flexbox容器内子元素按列多行排列并控制列间对齐方式。在使用 Flexbox 布局时，若希望容器内的子元素在垂直方向上多行排列，并对齐这些行，可以通过 flex-wrap 和 align-content 属性配合实现。这适用于子项总高度超过容器高度、需要换行显示的场景。
启用多行布局：flex-wrap
默认情况下，Flex 容器中的项目只在一行内排列（不换行）。要让项目在垂直方向上换行，需设置：
flex-wrap: wrap;这样当主轴方向空间不足时，项目会折行到下一行。如果主轴是水平方向（默认），则换行发生在横向溢出时；但如果我们把主轴改为垂直方向，则换行会沿列方向发生。
若想让项目在纵列中多行分布（即按列换行），可以结合：
flex-direction: column;flex-wrap: wrap;控制多行对齐：align-content
align-content 用于定义多行 flex 行在交叉轴上的对齐方式，仅在有多行时生效（即 flex-wrap: wrap 且内容换行）。
常见取值包括：
- flex-start：所有行靠顶部对齐
- flex-end：所有行靠底部对齐
- center：所有行居中对齐
- space-between：行之间均匀分布，首尾行贴边
- space-around：每行周围有相等空间
- space-evenly：行间和边缘间距完全相等
实际示例：垂直方向多列布局
假设我们想创建一个固定高度容器，内部项目按列从上到下排列，填满一列后再创建新列，并控制这些列的垂直对齐方式：
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
align-content: flex-start; / 控制列之间的对齐 /
}
.item {
width: 100px;
height: 50px;
margin: 5px 0;
}
在这个例子中：
- 每个项目高 50px，加上 margin 共占一定垂直空间
- 容器高度固定为 300px，不足以容纳所有项目在一列中
- 由于设置了
flex-wrap: wrap，项目会在列满后自动换列（从左到右生成新列） -
align-content决定这些“列”在水平方向的分布（因为交叉轴是水平的）
注意：此时主轴是垂直方向，交叉轴是水平方向，所以 align-content 实际控制的是各列在水平方向的对齐（如左对齐、居中等），而 justify-content 控制每列内项目在垂直方向的分布。
使用建议与注意事项
这种布局适合卡片、标签列表等需要纵向优先排列并多列展示的场景。关键点：
- 确保容器有固定高度或最大高度，否则不会触发换行
-
align-content在只有一行时无效 - 项目宽度应合理设置，避免列宽超出容器
- 若希望横向换行而非纵向，请保持
flex-direction: row并调整align-content
基本上就这些。通过灵活组合 flex-direction、flex-wrap 和 align-content，你可以精确控制多行 flex 布局的行为。关键是理解主轴与交叉轴的关系，以及换行发生的条件。不复杂但容易忽略细节。
