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: Lessons 01-03 — what display: flex does, direct children becoming flex items, the main axis and cross axis, and that justify-content aligns on the main axis while align-items aligns on the cross axis.
• 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: Lesson 02 — centering an item on both axes by combining justify-content: center (main axis) and align-items: center (cross axis).
• 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: Lesson 03 — flex-direction sets the main axis and the direction items flow; its default is row; column makes the main axis vertical.
• 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: Lesson 04 — flex-basis sets the starting size before free space is distributed; flex-grow/flex-shrink divide positive/negative free space by their factors; flex: 1 uses flex-basis: 0 to make equal items.
• 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: Lesson 05 — default flex-wrap: nowrap overflows; flex-wrap: wrap breaks items onto new lines; the gap property spaces flex items and is shorthand for 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: Lessons 01, 04, 05 — the main-axis/cross-axis mental model, that only direct children are laid out by the container, the recommendation to use the flex shorthand, and that gap spaces items only between them, not on outer edges.
• 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: Lessons 01-02 — the formal specification definitions of the main axis, the cross axis, and how flex items are placed along the main axis.
• 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."