← 首页 / 📐 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 实测呈现浏览器行为。

系列脉络: 先建立统一模型——两组属性(整组分配 vs 单项定位)× 两轴(justify 行内 / align 块)+ 五类取值关键字 → 辨析参照系(start / flex-start / self-start / left 的「起点」各指谁)→ 再逐模式落地:Block / 绝对定位 / 表格(补丁与历史遗产)、 Flexbox(主轴 / 交叉轴的例外映射)、 Grid(两层对齐、justify-self 生效)、 多列(对齐的是列盒)。 model · 统一模型与术语

一套对齐属性，横跨所有布局模式

建立全局坐标：alignment container / subject 两个术语；按「谁在动」分 -content（整组分配剩余空间）与 -items / -self（单项定位）两组，按「哪条轴」分 justify-（行内）与 align-（块）两列；取值归为 normal / positional / baseline / distributed / overflow 五类；外加 gap 与 place- 简写。用 Grid 当展台同时操纵全部六个属性。

 keywords · 参照系

start / flex-start / self-start：看起来都是「靠起点」，起点却各不相同

四组 positional 关键字的关键差别在参照系：start / end 跟容器书写方向、self-start / self-end 跟对象自身方向、flex-start / flex-end 跟 flex-direction、left / right 是物理方向。两个 demo 把书写方向与 flex 方向掰开：row-reverse 让 flex-start ≠ start，对象自身 rtl 让 self-start ≠ start，实测每个值落到哪个物理侧。

 in block / abspos / table

在 Block、绝对定位与表格中：对齐的「补丁」与历史遗产

三种老布局对 Box Alignment 的支持是逐步补上的：其一，align-content 如今可作用于普通 block 容器（块轴摆放块级子元素，曾只能靠 margin）；其二，justify-self / align-self 对绝对定位盒子生效（在 inset 区域内定位，normal 默认拉伸），取代 margin: auto 居中术；其三，表格单元基本不吃，仍用 text-align + vertical-align。新能力用运行时探测实测当前浏览器。

 in flexbox · 主轴 / 交叉轴

在 Flexbox 中：justify- 跟着主轴翻转，且没有 justify-self

Flex 是统一模型的例外：别的模式 justify-* 恒等于行内轴，Flex 改用主轴 / 交叉轴——justify-content 管主轴、align-* 管交叉轴，且随 flex-direction 翻转。它还没有 justify-self / justify-items，单项主轴对齐改用 margin: auto。本页讲映射规则，对齐边界细节交给姊妹 Flex 系列。

 in grid · 两层 · 轴不翻转

在 Grid 中：两层对齐，且 justify-self 真的生效

Grid 落得最完整、最贴合统一模型：justify-* 恒管行内轴、align-* 恒管块轴，不随方向翻转（与 Flex 对照）。两层对齐——*-items / -self 把项在各自 grid area 内定位（默认 stretch）、-content 分配轨道剩余空间。最关键区别：justify-self / justify-items 在 Grid 生效（Flex 忽略）。

 in multicol · 列盒作为对象

在多列布局中：被对齐的不是元素，而是「列盒」

多列是 Box Alignment 支持最薄的一块，特别之处在于对齐对象 = column box：列宽之和占不满容器时，justify-content（行内）把列盒整体摆放 / 分散、align-content（块）沿块轴摆放；空间分布的额外间隔会叠加到列缝。还有个历史细节：column-gap 初始值是 1em 而非 0。各引擎落地最晚，本页用运行时探测如实标注支持情况。

 贯穿全系列的一条主线。同一个 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 下它们如何分道扬镳。

🎨 同源系列(本仓库)