css grid布局中对齐方式如何控制_通过justify和align系列属性说明_网络技术

justify-items和align-items控制子项在单元格内的行内轴（水平）和块轴（垂直）对齐，默认stretch；justify-content和align-content对齐整个网格轨道，仅在轨道未填满容器时生效；justify-self和align-self可覆盖单个子项对齐。

justify-items 和 align-items 控制所有子项的默认对齐

这两个属性作用于 grid 容器，为所有 grid-item 设置统一的对齐基准。它们不改变网格线位置，只调整内容在单元格内的“摆放姿势”。

justify-items 控制**行内轴（inline axis）** 对齐，即水平方向（LTR 下从左到右），取值如 start、center、end、stretch
align-items 控制**块轴（block axis）** 对齐，即垂直方向，取值同上
默认值都是 stretch，所以子项常被拉满整个单元格——这容易误以为是“没生效”，其实是它太尽责了
若某子项自身设置了 justify-self 或 align-self，会覆盖容器级设置

justify-content 和 align-content 处理整个网格轨道的定位

当所有 grid 轨道加起来撑不满容器时，这两者才起作用。它们对齐的是**网格轨道整体**（即所有行/列组成的那个“大盒子”），不是单个子项。

justify-content 沿**行内轴**分布轨道（比如多列窄了，左右留白怎么分）
align-content 沿**块轴**分布轨道（比如三行高度总和远小于容器高，行间距怎么分配）
常见值：start（贴边）、center（居中）、space-between（首尾贴边，中间等距）、space-around、space-evenly
注意：align-content 在只有一行或一列时无效——没“内容可分布”

justify-self 和 align-self 覆盖单个子项对齐

这是最细粒度的控制，直接写在 grid 子项上，优先级高于容器上的 justify-items 和 align-items。

适用于需要某个按钮居右、某个头像垂直居中、某个卡片底部对齐等场景
支持 self-start / self-end，表示按该子项自身的书写模式对齐（比如 RTL 下 self-start 是右边）
不能用于 display: contents 的子项——它已脱离盒模型，没“自身”可对齐了
与 place-self 简写等价：place-self: center end ≡ justify-self: end; align-self: center

别混淆 justify/align 的轴向和适用层级

最容易出错的是记混哪个属性管哪一层、哪根轴。记住一个口诀：「容器设项，内容设轨；inline 是行，block 是列」。

justify-* 一律作用于**行内轴**（默认水平），align-* 一律作用于**块轴**（默认垂直）
-items 和 -self 都是对齐**子项内容**；-content 是对齐**轨道集合**
Flexbox 里也有同名属性，但 Flexbox 没有 align-content 对多行的有效控制（只有 wrap 后的行间分布），而 Grid 的 align-content 是真能精确调度每行间隙的
如果设置了 grid-auto-rows: minmax(100px, auto) 却发现 align-content: center 不生效，大概率是因为所有行高度已由内容撑开，没留下可分配的剩余空间

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
  justify-items: center;
  align-items: start;
  justify-content: space-evenly;
  align-content: start;
}
.item-a {
justify-self: end;
align-self: stretch;
}
.item-
b {
place-self: center;
}

实际布局中，justify-content 和 align-content 的生效条件比想象中苛刻，很多人调了半天没反应，其实只是网格轨道已经填满容器了。

# css # ai # 垂直居中 # grid布局 # auto # display # 的是 # 都是 # 行间 # 作用于 # 这是 # 也有 # 是因为 # 很多人 # 适用于 # 这两个

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】