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;

如果所有项目都在一行，align-content 不会产生任何效果。

2. align-content 的可选值及效果

以下是常用的 align-content 取值及其表现：

• flex-start：各行向交叉轴起点对齐
• flex-end：各行向交叉轴终点对齐
• center：各行在交叉轴居中对齐
• space-between：行与行之间等距分布，首行在起点，末行在终点
• space-around：每行周围分配相等空间
• space-evenly：所有行之间的间距以及与容器边缘的间距都相等
• stretch（默认值）：当行高度未设定时，拉伸填满容器交叉轴空间

3. 实际示例

html 结构：

 <div class="container">   <div class="item">1</div>   <div class="item">2</div>   <div class="item">3</div>   <div class="item">4</div> </div> 

css 样式：

会译·对照式翻译

会译是一款AI智能翻译浏览器插件，支持多语种对照式翻译

0

查看详情

 .container {   display: flex;   flex-wrap: wrap;   height: 300px;   align-content: center; /* 控制多行垂直居中 */   border: 1px solid #ccc; } <p>.item { width: 100px; height: 50px; }</p>

当项目换行成两行时，这两行会在容器中垂直居中对齐。

4. 注意事项

• align-content 不影响单行布局
• 若使用 align-items，它控制的是每行内项目的对齐；而 align-content 控制的是“行”本身的对齐
• 在没有明确设置行高或容器有固定高度时，stretch 效果更明显

基本上就这些，合理使用 align-content 能更好地控制多行弹性布局的垂直分布。

立即学习“前端免费学习笔记（深入）”；

以上就是