css flexbox对齐方式align-content如何使用
align-content用于多行flex容器中交叉轴对齐，需配合flex-wrap使用。其值包括flex-start、flex-end、center、space-between、space-around、space-evenly和stretch，默认为stretch，控制行间对齐方式，不影响单行布局。
align-content 用于控制 Flex 容器中多行 flex 项目在交叉轴（cross axis）上的对齐方式，但前提是容器内的项目必须换行（即 flex-wrap: wrap 或 wrap-reverse），否则它不会生效。
1. 基本前提：开启换行
align-content 只在多行 flex 容器中起作用。你需要设置：- flex-wrap: wrap; —— 允许项目换行
- 或 flex-wrap: wrap-reverse;
2. align-content 的可选值及效果
以下是常用的 align-content
取值及其表现：
- flex-start：各行向交叉轴起点对齐
- flex-end：各行向交叉轴终点对齐
- center：各行在交叉轴居中对齐
- space-between：行与行之间等距分布，首行在起点，末行在终点
- space-around：每行周围分配相等空间
- space-evenly：所有行之间的间距以及与容器边缘的间距都相等
- stretch（默认值）：当行高度未设定时，拉伸填满容器交叉轴空间
3. 实际示例
HTML 结构：1 2 3 4
CSS 样式：
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
align-content: center; /* 控制多行垂直居中 */
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 50px;
}
当项目换行成两行时，这两行会在容器中垂直居中对齐。4. 注意事项
- align-content 不影响单行布局
- 若使用 align-items，它控制的是每行内项目的对齐；而 align-content 控制的是“行”本身的对齐
- 在没有明确设置行高或容器有固定高度时，stretch 效果更明显
基本上就这些，合理使用 align-content 能更好地控制多行弹性布局的垂直分布。
