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-05 — what display: flex does, direct children becoming flex items, the inline-flex variant, the main axis and cross axis, the full list of initial values a new flex container starts from, Flexbox as a one-dimensional model, start/end lines and writing modes, the flex-flow shorthand, justify-items being ignored, the predefined flex shorthand values, and each wrapped line acting as its own flex container.
  • 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." "You can explicitly control whether the container itself is displayed inline or in block formatting context using inline flex or inline-flex for inline flex containers or block flex or flex for block level flex containers." "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." "When we describe flexbox as being one-dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout." Initial values: "Items display in a row (the flex-direction property's default value is row)." "The items start from the start edge of the main axis." "The items do not stretch on the main dimension but can shrink (a flex-item's flex-grow property's default value is 0 and its flex-shrink property's default value is 1)." "The items will stretch to fill the size of the cross-axis (the align-items property's default value is stretch)." "The flex-item's flex-basis property's default value is auto." "All the items will be in a single row (the flex-wrap property's default value is nowrap), overflowing their container if their combined width/height exceeds the containing element width/height." "flexbox makes no assumption about the writing mode of the document... If the flex-direction is row and I am working in English, then the start edge of the main axis will be on the left, the end edge on the right. If I were to work in Arabic, then the start edge of my main axis would be on the right and the end edge on the left. In both cases the start edge of the cross-axis is at the top of the flex container and the end edge at the bottom." "You can combine the two properties flex-direction and flex-wrap into the flex-flow shorthand." "The justify-items property is ignored in flexbox layouts." "Setting flex: initial resets the item to the initial values of the three longhand properties, which is the same as flex: 0 1 auto." "Using flex: auto is the same as using flex: 1 1 auto." "Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto." "The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is the same as writing flex: 1 1 0 or flex: 2 1 0." "These values for flex-grow and flex-shrink are proportions." "While flexbox is a one dimensional model, it is possible to make flex items wrap across multiple lines. If you do this, you should consider each line as a new flex container. Any space distribution will happen across each line, without reference to the previous or subsequent lines."

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: Lessons 02, 03, 05 — centering an item on both axes by combining justify-content: center (main axis) and align-items: center (cross axis); the value vocabulary both properties share (flex-start/flex-end/center/space-between/space-around/space-evenly), stretch as the initial align-items value, baseline, align-self for a single item, auto margins as the main-axis escape hatch, writing-mode-aware start/end, and align-content for distributing wrapped flex lines.
  • 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." "The reason the items become the same height is that the initial value of align-items, the property that controls alignment on the cross axis, is set to stretch." "The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items, plus a value of auto, which resets the value to that defined on the flex container." "You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items... With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end." "When flex items are allowed to wrap across multiple lines, the align-content property can be used to control the distribution of space between the lines, also known as packing flex lines." "For align-content to have an effect, the cross axis dimension (the height in this case) of the flex container must be greater than needed to display the items." "Remember that with all of these alignment methods, the values of start and end are writing mode-aware." "We don't have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment... by using auto margins along with flexbox." "item 4 is separated from the first three items by setting margin-left to auto, which consumes all the space it can in its axis."

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; the -reverse values swap main-start and main-end; row/row-reverse are affected by the container's directionality; and the -reverse values create a visual-order/DOM-order disconnect that harms assistive-technology users.
  • 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. "row-reverse: Behaves the same as row but the main-start and main-end points are opposite to the content direction." "column-reverse: Behaves the same as column but the main-start and main-end are opposite to the content direction." "Note that the values row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right." "Using the flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader."

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; the definitions of positive and negative free space; min-content/max-content as the natural sizes an auto basis resolves to; and why shrinking is weighted by flex base size and floored at min-content.
  • 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." "flex-grow: How much of the positive free space does this item get? flex-shrink: How much negative free space can be removed from this item? flex-basis: What is the size of the item before growing and shrinking happens?" "When a flex container has positive free space, it has more space than required to display the flex items inside the container. For example, a 500px-wide container, with flex-direction set to row and containing three 100px-wide flex items has 200px of positive free space." "A flex container has negative free space when the combined value of the natural sizes of the flex items is larger than the available space in the flex container. If the three flex items in the 500px-wide container example above are each 200px wide instead of 100px, their combined natural width is 600px, resulting in 100px of negative free space." "Generally, min-content is the smallest size an element can be while still fitting the longest word, and max-content is the size the element would need to be to fit all the content without wrapping." "If no such size is set, meaning the item is auto-sized, then auto resolves to the size of its content... meaning the flex-basis is the item's max-content size." "The flex-shrink property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed." "The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink. So, for example, a small item won't shrink to zero before a larger item has been noticeably reduced." "Small items will not shrink to less than their min-content size."

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; each flex line acts as an independent container so a short last line stretches; and the boundary where a component should move to CSS Grid.
  • 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." "As the items can grow, they will expand to fill each row completely. If there is only one item on the final line it will stretch to fill the entire line." "There are no flexbox features to tell items in one row to line up with items in the row above — each flex line acts like a new flex container." "If you want layout in two dimensions then you probably want grid layout." "With CSS grid, the last item stays in its grid cell; grid items don't stretch when there are fewer of them in the last row." "when you catch yourself adding widths to flex items in this way or adding empty flex items to take up space, it is a good indication you may want to switch to CSS grid layout for that component." "The gap property is not the only thing that can add space between items. Margins, padding, justify-content, and align-content can also increase the size of the gutter, affecting the actual size of the 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 (so flex containers nest), 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."