对传统 CSS Grid 与 Flexbox 的洞察总结

Source: Dev.to

行内方向（大多数书写模式下从左 → 右）

• 以 justify- 开头的属性通常控制沿行内轴的对齐。
• justify-content – 在容器上使用，用于在有剩余空间时沿行内轴对齐网格轨道（grid）或弹性项目（flexbox）。
• justify-items – 在网格容器上使用，定义网格项目在其网格单元内沿行内轴的默认对齐方式。
• justify-self – 在网格项目上使用，覆盖该项目的 justify-items 设置。

块方向（大多数书写模式下从上 → 下）

• 以 align- 开头的属性通常控制沿块轴的对齐。
• align-content – 在容器上使用，用于在有剩余空间时沿块轴对齐网格轨道或弹性行。
• align-items – 在容器上使用，设置项目沿交叉轴的默认对齐方式。
  • 在网格中，交叉轴等同于块轴。
  • 在弹性盒中，交叉轴取决于 flex-direction。
• align-self – 在单个项目上使用，覆盖该项目的 align-items 值。

注意：justify-items 在弹性盒中无效；它仅适用于网格容器。align-content 在网格和弹性盒中都可使用，但在弹性盒中仅在存在多行弹性项目（例如 flex-wrap: wrap）时才会产生效果。

网格自动流（Grid auto‑flow）

使用 grid-auto-flow: row

• 列由 grid-template-columns 决定。
• 如果项目数量超过可用单元格，系统会自动创建新行。

使用 grid-auto-flow: column

• 行由 grid-template-rows 决定。
• 多余的项目会创建新列。

定义轨道

• grid-template-columns / grid-template-rows – 定义显式网格（即你显式声明的轨道）。
• grid-auto-columns / grid-auto-rows – 定义在需要新行或新列时隐式创建的轨道大小。

常见响应式网格模式

/* 固定宽度列，填满容器 */
grid-template-columns: repeat(auto-fill, 200px);

• 创建固定宽度（200 px）的列。浏览器会在容器中尽可能放入更多列；行尾可能会留下空余空间。

/* 具有最小尺寸的弹性列 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

• 每列最小为 200 px，但可以增长。剩余空间使用 1fr 分配。当有足够空间再容纳一个 200 px 列时，浏览器会自动添加新列。

网格模板区域（Grid template areas）

grid-template-areas:
  '. . .'
  '. . .';

• 每个字符串代表一行，每个值代表一列单元格。这会创建一个 3 列 × 2 行的网格。grid-template-areas 主要用于为布局区域命名，而不仅仅是定义轨道数量。

轨道尺寸关键字

• min-content – 将轨道收缩到不溢出的最小尺寸。文本会根据需要换行，通常会收缩到最长的不可断词。
• max-content – 将轨道扩展到所有内容都能在一行内显示（不换行）。即使容器变大，轨道也不会进一步增长。
• fit-content(200px) – 允许轨道增长以适应内容，但最大不超过 200 px。
• auto – 根据内容和可用空间来确定轨道尺寸。其行为类似于 minmax(min-content, max-content)，但在有空余空间时也可以拉伸。

---

这些类似速查表的要点在编码时用于快速回忆非常实用，省去反复阅读长篇文章并在大量上下文切换中消耗大脑的过程。

欢迎补充更多见解、指出错误，或分享你自己记忆 CSS 布局规则的思维模型。