align-content用于多行flex容器中控制行在交叉轴的对齐方式，需配合flex-wrap: wrap使用，常见取值有flex-start、center、space-between等，适用于创建响应式网格布局。
在使用 CSS Flexbox 布局时，align-content 是实现多行内容对齐的关键属性。它只在容器设置为多行（即 flex-wrap: wrap）且存在多余空间时生效。通过合理使用 align-content，可以轻松控制多行 flex 项目在交叉轴上的分布方式。
开启多行布局：使用 flex-wrap
默认情况下，flex 容器中的项目会尽量排列在一行内。要让项目换行显示，必须设置：
flex-wrap: wrap;或简写形式：
flex-flow: row wrap;这样当主轴方向空间不足时，项目就会自动折到下一行。
立即学习“前端免费学习笔记（深入）”；
理解 align-content 的作用
align-content 控制的是多行 flex 行之间的对齐与间距分配，不同于 align-items（控制单个项目的交叉轴对齐）。常见取值包括：
- flex-start：所有行堆在交叉轴起点
- flex-end：所有行堆在终点
- center：居中对齐整体行组
- space-between：行之间等距分布，首尾贴边
- space-around：每行周围有相等空间
- space-evenly：行间和边缘间距完全均匀
实际示例：创建一个响应式卡片网格
假设有一组卡片，希望它们在容器中多行排列，并垂直居中对齐整体块：
.container { display: flex; flex-wrap: wrap; height: 400px; align-content: center; /* 多行整体居中 */ gap: 16px; /* 推荐使用 gap 控制间距 */ } .card { flex: 0 0 100px; height: 80px; background: #007bff; color: white; }当卡片数量较多导致换行时，这些行会在容器的 400px 高度中垂直居中排列。
注意事项与兼容性
确保父容器有明确的高度或足够交叉轴空间，否则 align-content 效果可能不明显。同时注意：
- 单行 flex 容器中
align-content无效 - 老版本浏览器需避免
space-evenly（IE 不支持） - 使用
gap比 margin 更清晰地管理项目间隔
基本上就这些。掌握 flex-wrap 和 align-content 的配合，就能灵活处理多行弹性布局，无需依赖 Grid 或浮动方案。不复杂但容易忽略细节。
