CSSGrid对齐控制详解：justify与align属性全解析

本篇文章给大家分享《CSS Grid对齐控制详解：justify与align属性全解析》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

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;
}
<p>.item-a {
justify-self: end;
align-self: stretch;
}</p><p>.item-b {
place-self: center;
}</p>

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

本篇关于《CSSGrid对齐控制详解：justify与align属性全解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！