Glossary
70 terms from "CSS Flexbox：弹性布局入门." Look them up when you get stuck; the first mention in the text carries a hover definition.
| Term | Definition | Source |
|---|---|---|
| flex container | 设置了 display: flex 的元素，它的直接子元素会作为 flex item 沿一条轴摆放。 | MDN: Basic concepts of flexbox |
| flex item | flex 容器的直接子元素；只有直接子元素（而非更深的后代元素）会成为 flex item。 | MDN: Basic concepts of flexbox |
| display: flex | 设置在容器上的声明，把它的直接子元素变成 flex item 并沿主轴摆放。 | MDN: Basic concepts of flexbox |
| 直接子元素 | 正好在容器内一层的元素——只有它们会被 display: flex 变成 flex item。 | CSS-Tricks: A Complete Guide to Flexbox |
| 嵌套 flex 容器 | 一个元素既是父元素的 flex item，又因为自己也设了 display: flex 而成为它自己子元素的 flex 容器。 | CSS-Tricks: A Complete Guide to Flexbox |
| display: inline-flex | 同样造出 flex 容器的值，但容器自身以行内方式待在文字流中；对内部子元素的作用与 display: flex 完全一致。 | MDN: Basic concepts of flexbox |
| 块级布局 | 默认的布局模式：每个元素独占一行、盒子竖直堆叠——正是 display: flex 要替换掉的东西。 | MDN: Basic concepts of flexbox |
| flex 行 | flex 容器沿主轴摆放 item 的那一条行；不开启换行时所有 item 都留在它上面。 | MDN: Basic concepts of flexbox |
| 主轴 | flex 容器摆放 item 所沿的首要轴；方向由 flex-direction 设定（默认水平）。 | W3C: CSS Flexible Box Layout Module Level 1 |
| 起始边 | item 开始排布的那一侧主轴边缘——默认位置，因为 item 并不是从中间开始的。 | MDN: Basic concepts of flexbox |
| 初始值 | display: flex 一次性打开的一整套默认值：row 方向、不增长、允许收缩、交叉轴拉伸、auto 基础尺寸、不换行。 | MDN: Basic concepts of flexbox |
| 一维布局 | Flexbox 的模型：一次只沿一条轴摆放 item，要么一行要么一列，而不是同时管行和列。 | MDN: Basic concepts of flexbox |
| CSS Grid | 同时控制行和列的姊妹布局模块；布局一旦真的是二维的，它才是对的工具。 | MDN: Basic concepts of flexbox |
| 交叉轴 | 与 flex 容器主轴垂直的那条轴。 | W3C: CSS Flexible Box Layout Module Level 1 |
| justify-content | 让 flex item 沿主轴对齐的属性（例如 center、flex-start、flex-end、space-between）。 | MDN: Basic concepts of flexbox |
| align-items | 让 flex item 沿交叉轴对齐的属性（例如 center、flex-start、flex-end、stretch）。 | MDN: Basic concepts of flexbox |
| justify-content: center | 沿主轴居中；把一个盒子在两个方向都居中时，它是其中一半。 | MDN: Aligning items in a flex container |
| align-items: center | 沿交叉轴居中；把盒子在两个方向都居中所需要的第二个属性。 | MDN: Aligning items in a flex container |
| flex-start | 命名相关那条轴起点的对齐值——对 justify-content 是主轴起点，对 align-items 是交叉轴起点。 | MDN: Aligning items in a flex container |
| flex-end | 命名相关那条轴终点的对齐值——对 justify-content 是主轴终点，对 align-items 是交叉轴终点。 | MDN: Aligning items in a flex container |
| space-between | 把 item 摆好后剩下的空间全部均匀分配在它们之间，第一个和最后一个紧贴两端。 | MDN: Aligning items in a flex container |
| space-around | 每个 item 两侧各得半份空间，于是外侧间距只有内侧的一半。 | MDN: Aligning items in a flex container |
| space-evenly | 每一份空间都是整份，包括最外侧那两份。 | MDN: Aligning items in a flex container |
| stretch | align-items 的初始值：item 拉伸填满交叉轴，这就是兄弟卡片会一样高的原因。 | MDN: Aligning items in a flex container |
| baseline | 交叉轴上按文字基线而不是按盒子边缘对齐的值。 | MDN: Aligning items in a flex container |
| align-self | 设在 item 上的属性，让某一个 item 覆盖容器的 align-items；接受同样的值，另加 auto。 | MDN: Aligning items in a flex container |
| justify-items | 在 flex 布局里会被忽略的属性，因为主轴上 flex 把 item 当作一个整体处理。 | MDN: Basic concepts of flexbox |
| auto 外边距 | 主轴上的逃生口：margin-left: auto 会吃掉那一侧能吃的全部自由空间，把某个 item 推离其他人。 | MDN: Aligning items in a flex container |
| flex-direction | 设定主轴指向哪个方向以及 item 流动方向的属性（默认 row，另有 column、row-reverse、column-reverse）。 | MDN: flex-direction |
| flex-direction: row | 默认值：主轴沿行的方向，在从左往右的文档里 item 水平流动。 | MDN: flex-direction |
| flex-direction: column | 把主轴指向从上到下的值，于是 item 竖着排，而 justify-content 变成了管垂直的那个属性。 | MDN: Basic concepts of flexbox |
| row-reverse | 保持水平轴不变、但交换哪一端算主轴起点的值，于是 item 从相反一端开始排。 | MDN: flex-direction |
| column-reverse | 保持垂直轴不变、但让 item 从底部开始排的值。 | MDN: flex-direction |
| 主轴起点 | item 开始排布的那一端主轴；也是 justify-content 里 flex-start 解析到的位置。 | W3C: CSS Flexible Box Layout Module Level 1 |
| 主轴终点 | 主轴远端那一头；也是 justify-content 里 flex-end 解析到的位置。 | W3C: CSS Flexible Box Layout Module Level 1 |
| 书写模式 | 文档的文字方向；Flexbox 对它不作任何假设，而是按它来解析轴的起点和终点。 | MDN: Basic concepts of flexbox |
| 方向性 | flex 容器从左往右还是从右往左的设定，它会翻转 row 和 row-reverse 各自的含义。 | MDN: flex-direction |
| 块的方向 | 块级元素堆叠的方向——也就是 flex-direction: column 让主轴指向的方向。 | MDN: Basic concepts of flexbox |
| 视觉顺序 | item 在屏幕上出现的顺序；-reverse 值改的是它，而完全不动标记。 | MDN: flex-direction |
| DOM 顺序 | 元素在标记里出现的顺序——无论 CSS 怎么重排，辅助技术跟的都是它。 | MDN: flex-direction |
| 辅助技术 | 屏幕阅读器一类工具，其用户按 DOM 顺序接收内容，这正是 -reverse 值带无障碍代价的原因。 | MDN: flex-direction |
| flex-flow | 把 flex-direction 和 flex-wrap 合成一条的简写，所以 flex-flow: row wrap 一次设定两者。 | MDN: Basic concepts of flexbox |
| flex-basis | flex item 在任何自由空间分配之前、沿主轴的起始尺寸。 | MDN: Controlling ratios of flex items along the main axis |
| flex-basis: auto | 默认的基础尺寸：item 的起始尺寸来自它自己的 width，没设 width 就来自内容。 | MDN: Controlling ratios of flex items along the main axis |
| flex-grow | 决定一个 flex item 相对其兄弟元素拿走多少正自由空间的因子。 | MDN: Controlling ratios of flex items along the main axis |
| flex-shrink | 当出现负自由空间时，决定一个 flex item 相对其兄弟元素收缩多少的因子。 | MDN: Controlling ratios of flex items along the main axis |
| flex 简写 | 同时设定 flex-grow、flex-shrink、flex-basis 的 flex 属性；flex: 1 展开为 1 1 0。 | CSS-Tricks: A Complete Guide to Flexbox |
| flex: 1 1 0 | flex: 1 展开后的形态——grow 1、shrink 1、basis 0，这就是几个 flex: 1 的 item 能无视内容等宽的原因。 | MDN: Basic concepts of flexbox |
| 自由空间 | 容器里预留完每个 item 的基础尺寸之后剩下的部分；grow 和 shrink 永远只划分它。 | MDN: Controlling ratios of flex items along the main axis |
| 正自由空间 | 容器比摆下这些 item 所需要的更大的状态——flex-grow 唯一会作用的情形。 | MDN: Controlling ratios of flex items along the main axis |
| 负自由空间 | item 自然尺寸加起来超过容器的状态——flex-shrink 唯一会作用的情形。 | MDN: Controlling ratios of flex items along the main axis |
| 增长因子 | flex-grow 贡献给「划分正自由空间」那个总和的无单位数字；只有它与兄弟元素的比值有意义。 | MDN: Controlling ratios of flex items along the main axis |
| 收缩因子 | flex-shrink 贡献的数字；分配负空间前，它要先乘上该 item 的基础尺寸。 | MDN: Controlling ratios of flex items along the main axis |
| 基础尺寸 | item 解析出来的起始尺寸；分配负空间时收缩因子要乘上它。 | MDN: Controlling ratios of flex items along the main axis |
| min-content | 大致是元素仍能装下最长那个词的最小尺寸；item 不会收缩到低于它。 | MDN: Controlling ratios of flex items along the main axis |
| max-content | 元素装下全部内容且不换行所需要的尺寸；也是 auto 基础尺寸在没设 width 时解析到的值。 | MDN: Controlling ratios of flex items along the main axis |
| flex: none | 预定义值 0 0 auto：一个完全不可伸缩的 item，既不长也不缩。 | MDN: Basic concepts of flexbox |
| flex: initial | 预定义值 0 1 auto：不写任何 flex 声明时 item 已有的行为。 | MDN: Basic concepts of flexbox |
| flex: auto | 预定义值 1 1 auto：和 initial 一样，只是这个 item 还可以长开去填满容器。 | MDN: Basic concepts of flexbox |
| 不可伸缩 | 形容既不增长也不收缩的 item，也就是 flex: none 造出的效果。 | MDN: Basic concepts of flexbox |
| flex-wrap | 让 flex item 断到多行（wrap）而不是挤在一行溢出（默认 nowrap）的属性。 | MDN: Mastering wrapping of flex items |
| flex-wrap: nowrap | 初始值：对容器来说太宽的 item 会溢出容器，而不是断到新行。 | MDN: Mastering wrapping of flex items |
| flex-wrap: wrap | 允许 item 在当前行空间不够时移到新行上的声明。 | MDN: Mastering wrapping of flex items |
| gap | 容器属性，在相邻 flex item 之间添加固定间距，是 row-gap 和 column-gap 的简写。 | MDN: Mastering wrapping of flex items |
| row-gap | 设定换行出来的 flex 行之间固定距离的单属性写法。 | MDN: Mastering wrapping of flex items |
| column-gap | 设定一行内相邻 item 之间固定距离的单属性写法。 | MDN: Mastering wrapping of flex items |
| align-content | 把换行出来的那一组 flex 行分配在交叉轴剩余空间里的属性，有时被描述为打包 flex 行。 | MDN: Aligning items in a flex container |
| 打包 flex 行 | align-content 干的活：把整行整行当作一组来定位，而不是在行内定位 item。 | MDN: Aligning items in a flex container |
| 二维 | 同时控制行和列的布局——那是 CSS Grid 的活，不是 Flexbox 的。 | MDN: Mastering wrapping of flex items |
| grid item | CSS Grid 的子元素；即使最后一行个数更少，它也留在自己的格子里而不拉伸。 | MDN: Mastering wrapping of flex items |