css align-content在多行网格中如何使用-css教程-PHP中文网

css align-content在多行网格中如何使用

P粉602998670

发布： 2025-09-30 19:19:02

原创

356人浏览过

css align-content在多行网格中如何使用

在CSS网格布局中，align-content 用于控制多行网格轨道（grid tracks）在容器的交叉轴（cross axis）上的对齐方式。当网格容器有多余空间，并且网格行的总高度小于容器高度时，align-content 就会起作用。

适用场景：多行网格布局

align-content 只在以下情况生效：

网格容器中有多行（即多个 grid-row）
所有行的高度总和小于网格容器的高度
使用了 grid-auto-rows 或显式定义了行高

如果只有一行，或行高占满容器，则 align-content 不会产生效果。

常用属性值说明

align-content 支持多个对齐值：

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

start：行向容器顶部对齐（默认行为）
end：行向容器底部对齐
center：行整体居中排列
space-between：行之间等距分布，首尾行贴边
space-around：每行周围分配相等空间
space-evenly：所有行之间的间隔完全相等
stretch：行拉伸以填满容器（前提是行高未固定）

实际代码示例

下面是一个使用 align-content: center 的例子：

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px; /* 每行高80px */
  gap: 10px;
  height: 400px; /* 容器高度大于内容总高度 */
  align-content: center; /* 多出行在垂直方向居中 */
}
<p>.item {
background: lightblue;
}</p>

登录后复制

在这个例子中，假设有4行内容，总高度为 4×80 + 3×10 = 350px，而容器是400px，多出的50px空间会被 align-content: center 均匀分配到上下两侧。