CSS 与布局 / CSS Box Alignment · 一套对齐属性横跨所有布局 待审核 6 页

CSS Box Alignment · 一套对齐属性横跨所有布局

「居中一个盒子」曾要按布局模式各记一套写法：块级用 margin: auto 或 text-align、表格用 vertical-align、Flexbox 又自带 justify-* 与 align-*。CSS Box Alignment 模块把对齐抽象成一组与布局无关的属性 —— justify-content、align-content、justify-items、align-items、justify-self、align-self，加上 place-* 简写与 gap —— 再由各布局模式各自规定哪些生效、轴如何映射。本系列先讲清这套统一模型与术语，再逐一落到 Block、绝对定位、表格、Flexbox、Grid 与多列，并辨析 start、flex-start、self-start 这组易混关键字的参照系。各页的浏览器行为均以 getComputedStyle 与 getBoundingClientRect 实测呈现。

系列脉络：先建立统一模型，即两组属性 (整组分配与单项定位) 乘两条轴 (justify 行内、align 块) 加五类取值关键字；再辨析参照系，即 start、flex-start、self-start、left 的起点各指谁；最后逐模式落地：Block、绝对定位与表格、Flexbox (主轴与交叉轴的例外映射)、Grid (两层对齐，justify-self 生效)、多列 (对齐的是列盒)。 model · 统一模型与术语

统一对齐模型与术语

建立全局坐标：alignment container 与 subject 两个术语，按「谁在动」与「哪条轴」分出六个属性，取值归为五类，外加 gutters 与 place-* 简写。

 keywords · 参照系

positional 关键字的参照系

start、self-start、flex-start、left 看起来都是「靠起点」，参照系却分别是容器流向、对象自身流向、flex 方向与物理方向。两个 demo 把这些参照掰开。

 in block / abspos / table

在 Block、绝对定位与表格中

三种老布局对 Box Alignment 的支持是逐步补上的：块容器落了三个属性、绝对定位盒子在 inset 区域内定位、表格单元仍用 text-align 与 vertical-align。

 in flexbox · 主轴 / 交叉轴

在 Flexbox 中的映射规则

Flex 是统一模型的例外：justify-content 管主轴、align-* 管交叉轴且随 flex-direction 翻转，另缺 justify-self 与 justify-items，单项主轴对齐改用 auto margin。

 in grid · 两层 · 轴不翻转

在 Grid 中的两层对齐

Grid 落得最完整：justify-* 恒管行内轴、align-* 恒管块轴且不随方向翻转，两层对齐分别把项定位在各自 grid area 内与分配轨道剩余空间。

 in multicol · 列盒作为对象

在多列布局中的列盒对齐

多列的对齐对象是 column box 而非元素。列宽之和占不满容器时由 justify-content 摆放列盒，空间分布的额外间隔会叠加到列缝上。

 贯穿全系列的一条主线。同一个 justify-content，在 Flex 里分配主轴上的项、在 Grid 里分配列轨、在多列里分配列盒；同一句「块轴居中」，Flex 写 align-items: center、表格写 vertical-align: middle、定高 block 容器写 align-content: center。对象与语法因布局而异，而「把一组对齐对象在容器内沿某轴摆放」这个语义不变，这正是 Box Alignment 把对齐从各布局里抽象出来的意义。

🔗 相关链接

📐 规范 / 文档

  • MDN · CSS Box Alignment 总览 developer.mozilla.org model 页的依据:六个属性、两组分类、两轴映射、五类取值关键字与 alignment container / subject 术语。
  • MDN · 在 block / abspos / table 中的对齐 developer.mozilla.org in-block 页的依据:block 容器的 align-content、绝对定位盒子的 justify-self / align-self 与 normal 行为、表格仍用 vertical-align / text-align。
  • MDN · 在 Flexbox 中的对齐 developer.mozilla.org in-flexbox 页的依据:主轴 / 交叉轴映射、justify-self / justify-items 为何被忽略、margin: auto 的替代角色。
  • MDN · 在 Grid 布局中的对齐 developer.mozilla.org in-grid 页的依据:两层对齐(轨道组 vs grid area)、轴恒定不翻转、justify-self 在 Grid 生效。
  • MDN · 在多列布局中的对齐 developer.mozilla.org in-multicol 页的依据:列盒作为对齐对象、justify-content 分配列盒、column-gap 初始值 1em 的特例。
  • CSS Box Alignment Module Level 3 W3C / CSSWG 规范全文:<content-position> / <self-position> / <content-distribution> / <overflow-position> 四类取值与 fallback alignment 的定义。
  • start vs flex-start vs self-start 的区别 csslayout.news keywords 页的直接出处:三组关键字各以什么为参照,以及 row-reverse / 对象 rtl 下它们如何分道扬镳。

🎨 同源系列(本仓库)