Sources

S1 — MDN: Basic concepts of flexbox

URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts

• authority: official-docs
• supports: 第 1-3 课：display: flex 做什么、直接子元素成为 flex item、主轴与交叉轴，以及 justify-content 沿主轴对齐、align-items 沿交叉轴对齐。
• key-fact: "To create a flex container, set the area's display property to flex. When we do this, the direct children of that container become flex items." "The main axis is defined by flex-direction." "The cross axis runs perpendicular to the main axis." "The justify-content property is used to align the items on the main axis." "The align-items property aligns all the flex items on the cross axis."

S2 — MDN: Aligning items in a flex container

URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items

• authority: official-docs
• supports: 第 2 课：把 justify-content: center（主轴）和 align-items: center（交叉轴）组合起来，在两条轴上同时居中一个元素。
• key-fact: "To center an element, we use the align-items property to align the item on the cross axis... We use justify-content to align the item on the main axis, which in this case is the inline axis running horizontally."

S3 — MDN: flex-direction

URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction

• authority: official-docs
• supports: 第 3 课：flex-direction 设定主轴和 item 流动的方向；默认值是 row；column 让主轴变为垂直。
• key-fact: "The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)." Initial value: row.

S4 — MDN: Controlling ratios of flex items along the main axis

URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios

• authority: official-docs
• supports: 第 4 课：flex-basis 设定自由空间分配之前的起始尺寸；flex-grow / flex-shrink 按因子划分正/负自由空间；flex: 1 借助 flex-basis: 0 做出等宽 item。
• key-fact: "The flex-basis property specifies the initial size of a flex item before any distribution of the positive or negative free space happens." "The flex-grow property specifies the flex grow factor, which determines how much a flex item will grow relative to the other flex items... when positive free space is distributed." "To create three equally-sized items... set the flex-basis component to 0."

S5 — MDN: Mastering wrapping of flex items

URL: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Wrapping_items

• authority: official-docs
• supports: 第 5 课：默认的 flex-wrap: nowrap 会溢出；flex-wrap: wrap 让 item 断到新行；gap 属性拉开 flex item 间距，是 row-gap / column-gap 的简写。
• key-fact: "The initial value of the flex-wrap property is nowrap. This means if a set of flex items is too wide for their flex container, they will overflow it." "add the flex-wrap property with a value of wrap... Items will then wrap onto new lines when they overflow their container." "use the gap property directly on the flex container to create a fixed space between adjacent flex items. The gap property is a shorthand for row-gap and column-gap."

S6 — CSS-Tricks: A Complete Guide to Flexbox

URL: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• authority: authoritative-guide
• supports: 第 1、4、5 课：主轴/交叉轴的心智模型、容器只摆放直接子元素、推荐使用 flex 简写，以及 gap 只在 item 之间放间距、不放在外边缘。
• key-fact: "The main axis of a flex container is the primary axis along which flex items are laid out" while "the axis perpendicular to the main axis is called the cross axis." "This is the shorthand for flex-grow, flex-shrink and flex-basis combined... It is recommended that you use this shorthand." The gap property "applies that spacing only between items not on the outer edges."

S7 — W3C: CSS Flexible Box Layout Module Level 1

URL: https://www.w3.org/TR/css-flexbox-1/

• authority: official-docs
• supports: 第 1-2 课：规范对主轴、交叉轴的正式定义，以及 flex item 如何沿主轴摆放。
• key-fact: "The main axis of a flex container is the primary axis along which flex items are laid out." "The axis perpendicular to the main axis is called the cross axis." "The flex items are placed within the container starting on the main-start side and going toward the main-end side."