Glossary
14 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 |
| main axis | flex 容器摆放 item 所沿的首要轴；方向由 flex-direction 设定（默认水平）。 | W3C: CSS Flexible Box Layout Module Level 1 |
| cross axis | 与 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 |
| flex-direction | 设定主轴指向哪个方向以及 item 流动方向的属性（默认 row，另有 column、row-reverse、column-reverse）。 | MDN: flex-direction |
| flex-basis | flex item 在任何自由空间分配之前、沿主轴的起始尺寸。 | 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 shorthand | 同时设定 flex-grow、flex-shrink、flex-basis 的 flex 属性；flex: 1 展开为 1 1 0。 | CSS-Tricks: A Complete Guide to Flexbox |
| flex-wrap | 让 flex item 断到多行（wrap）而不是挤在一行溢出（默认 nowrap）的属性。 | MDN: Mastering wrapping of flex items |
| gap | 容器属性，在相邻 flex item 之间添加固定间距，是 row-gap 和 column-gap 的简写。 | MDN: Mastering wrapping of flex items |