Glossary
70 terms from "CSS Flexbox: axes, alignment, and flexible sizing." Look them up when you get stuck; the first mention in the text carries a hover definition.
| Term | Definition | Source |
|---|---|---|
| flex container | An element with display: flex, whose direct children are laid out as flex items along an axis. | MDN: Basic concepts of flexbox |
| flex item | A direct child of a flex container; only direct children (not deeper descendants) become flex items. | MDN: Basic concepts of flexbox |
| display: flex | The declaration set on a container that turns its direct children into flex items and lays them out along the main axis. | MDN: Basic concepts of flexbox |
| direct children | The elements exactly one level inside the container — the only elements display: flex turns into flex items. | CSS-Tricks: A Complete Guide to Flexbox |
| nested flex container | An element that is a flex item of its parent and, because it also has display: flex, a flex container for its own children. | CSS-Tricks: A Complete Guide to Flexbox |
| display: inline-flex | A value that makes a flex container which sits inline in the surrounding text, while its children behave exactly as in a display: flex container. | MDN: Basic concepts of flexbox |
| block layout | The default layout mode where each element takes its own line and boxes stack vertically — what display: flex replaces. | MDN: Basic concepts of flexbox |
| flex line | The single line along the main axis that a flex container places its items on, unless wrapping is enabled. | MDN: Basic concepts of flexbox |
| main axis | The primary axis a flex container lays its items out along; its direction is set by flex-direction (horizontal by default). | W3C: CSS Flexible Box Layout Module Level 1 |
| start edge | The side of the main axis items are placed from — the default position, since items do not begin centered. | MDN: Basic concepts of flexbox |
| initial values | The bundle of defaults display: flex switches on at once — row direction, no growing, shrinking allowed, cross-axis stretching, auto basis, and no wrapping. | MDN: Basic concepts of flexbox |
| one-dimensional layout | Flexbox's model: it arranges items along one axis at a time, a row or a column, rather than rows and columns together. | MDN: Basic concepts of flexbox |
| CSS Grid | The sibling layout module that controls rows and columns together, and the right tool once a layout is genuinely two-dimensional. | MDN: Basic concepts of flexbox |
| cross axis | The axis perpendicular to the main axis of a flex container. | W3C: CSS Flexible Box Layout Module Level 1 |
| justify-content | The property that aligns flex items along the main axis (for example center, flex-start, flex-end, space-between). | MDN: Basic concepts of flexbox |
| align-items | The property that aligns flex items along the cross axis (for example center, flex-start, flex-end, stretch). | MDN: Basic concepts of flexbox |
| justify-content: center | Centering along the main axis; one half of centering a box in both directions. | MDN: Aligning items in a flex container |
| align-items: center | Centering along the cross axis; the second property needed to center a box in both directions. | MDN: Aligning items in a flex container |
| flex-start | An alignment value naming the start end of the relevant axis — main-start for justify-content, cross-start for align-items. | MDN: Aligning items in a flex container |
| flex-end | An alignment value naming the end of the relevant axis — main-end for justify-content, cross-end for align-items. | MDN: Aligning items in a flex container |
| space-between | A main-axis distribution that shares all spare space evenly between the items, leaving the first and last flush against the two ends. | MDN: Aligning items in a flex container |
| space-around | A distribution where each item gets a half-size space on either end, so the outer edges get half the gap the interiors do. | MDN: Aligning items in a flex container |
| space-evenly | A distribution where every space, including the two outer ones, is full-size. | MDN: Aligning items in a flex container |
| stretch | The initial value of align-items: items fill the cross axis, which is why sibling cards end up the same height. | MDN: Aligning items in a flex container |
| baseline | A cross-axis alignment value that lines items up by the baseline of their text rather than by their box edges. | MDN: Aligning items in a flex container |
| align-self | An item-level property that overrides the container's align-items for one item; accepts the same values plus auto. | MDN: Aligning items in a flex container |
| justify-items | A property that is ignored in flex layouts, because flex treats items as one group on the main axis. | MDN: Basic concepts of flexbox |
| auto margin | The main-axis escape hatch: margin-left: auto consumes all the free space it can, pushing one item away from the group. | MDN: Aligning items in a flex container |
| flex-direction | The property that sets which way the main axis points and the direction items flow (row by default, or column, row-reverse, column-reverse). | MDN: flex-direction |
| flex-direction: row | The default value: the main axis runs along the row, so items flow horizontally in a left-to-right document. | MDN: flex-direction |
| flex-direction: column | The value that points the main axis top to bottom, so items stack and justify-content becomes the vertical property. | MDN: Basic concepts of flexbox |
| row-reverse | A value that keeps the horizontal axis but swaps which end is main-start, so items lay out from the opposite end. | MDN: flex-direction |
| column-reverse | A value that keeps the vertical axis but starts items from the bottom. | MDN: flex-direction |
| main-start | The end of the main axis items are placed from; what flex-start resolves to for justify-content. | W3C: CSS Flexible Box Layout Module Level 1 |
| main-end | The far end of the main axis; what flex-end resolves to for justify-content. | W3C: CSS Flexible Box Layout Module Level 1 |
| writing mode | The document's text direction, which Flexbox makes no assumption about — it resolves start and end against it. | MDN: Basic concepts of flexbox |
| directionality | The flex container's left-to-right or right-to-left setting, which flips what row and row-reverse mean. | MDN: flex-direction |
| block direction | The direction blocks stack in — the way flex-direction: column points the main axis. | MDN: Basic concepts of flexbox |
| visual order | The order items appear on screen, which the -reverse values change without touching the markup. | MDN: flex-direction |
| DOM order | The order elements appear in the markup — the sequence assistive technology follows regardless of CSS reordering. | MDN: flex-direction |
| assistive technology | Tools such as screen readers whose users receive content in DOM order, which is why -reverse values carry an accessibility cost. | MDN: flex-direction |
| flex-flow | The shorthand that combines flex-direction and flex-wrap, so flex-flow: row wrap sets both at once. | MDN: Basic concepts of flexbox |
| flex-basis | A flex item's starting size along the main axis before any free space is distributed. | MDN: Controlling ratios of flex items along the main axis |
| flex-basis: auto | The default basis: the item's starting size comes from its own width, or from its content when no width is set. | MDN: Controlling ratios of flex items along the main axis |
| flex-grow | A factor that determines how much of the positive free space a flex item takes relative to its siblings. | MDN: Controlling ratios of flex items along the main axis |
| flex-shrink | A factor that determines how much a flex item shrinks relative to its siblings when there is negative free space. | MDN: Controlling ratios of flex items along the main axis |
| flex shorthand | The flex property that sets flex-grow, flex-shrink, and flex-basis together; flex: 1 expands to 1 1 0. | CSS-Tricks: A Complete Guide to Flexbox |
| flex: 1 1 0 | What flex: 1 expands to — grow 1, shrink 1, basis 0 — which is why several flex: 1 items come out equal regardless of content. | MDN: Basic concepts of flexbox |
| free space | What is left in the container after every item's base size is reserved; the only thing grow and shrink ever divide. | MDN: Controlling ratios of flex items along the main axis |
| positive free space | The condition where the container is bigger than needed to display its items — the only case flex-grow acts on. | MDN: Controlling ratios of flex items along the main axis |
| negative free space | The condition where the items' combined natural size exceeds the container — the only case flex-shrink acts on. | MDN: Controlling ratios of flex items along the main axis |
| grow factor | The unitless number flex-grow contributes to the sum that divides positive free space; only its ratio to siblings matters. | MDN: Controlling ratios of flex items along the main axis |
| shrink factor | The number flex-shrink contributes, multiplied by the item's flex base size before negative space is distributed. | MDN: Controlling ratios of flex items along the main axis |
| flex base size | The item's resolved starting size, which the shrink factor is multiplied by when negative space is distributed. | MDN: Controlling ratios of flex items along the main axis |
| min-content | Roughly the smallest size an element can be while still fitting its longest word; the floor an item will not shrink below. | MDN: Controlling ratios of flex items along the main axis |
| max-content | The size an element needs to fit all its content without wrapping; what an auto basis resolves to when no width is set. | MDN: Controlling ratios of flex items along the main axis |
| flex: none | The predefined value 0 0 auto: a fully inflexible item that neither grows nor shrinks. | MDN: Basic concepts of flexbox |
| flex: initial | The predefined value 0 1 auto: the behavior an item already has without any flex declaration. | MDN: Basic concepts of flexbox |
| flex: auto | The predefined value 1 1 auto: like initial, except the item may also grow to fill the container. | MDN: Basic concepts of flexbox |
| inflexible | Describing an item that neither grows nor shrinks, which is what flex: none produces. | MDN: Basic concepts of flexbox |
| flex-wrap | The property that lets flex items break onto multiple lines (wrap) instead of overflowing on one line (the default nowrap). | MDN: Mastering wrapping of flex items |
| flex-wrap: nowrap | The initial value: items that are too wide for the container overflow it rather than breaking onto a new line. | MDN: Mastering wrapping of flex items |
| flex-wrap: wrap | The declaration that allows items to move onto new lines as they run out of room on the current one. | MDN: Mastering wrapping of flex items |
| gap | A container property that adds fixed space between adjacent flex items and is shorthand for row-gap and column-gap. | MDN: Mastering wrapping of flex items |
| row-gap | The longhand that sets a fixed distance between wrapped flex lines. | MDN: Mastering wrapping of flex items |
| column-gap | The longhand that sets a fixed distance between adjacent items within a line. | MDN: Mastering wrapping of flex items |
| align-content | The property that distributes the set of wrapped flex lines in leftover cross-axis space, sometimes described as packing flex lines. | MDN: Aligning items in a flex container |
| packing flex lines | The job align-content does: positioning whole lines as a group, as opposed to positioning items within their line. | MDN: Aligning items in a flex container |
| two-dimensional | Layout that controls rows and columns together — the job of CSS Grid, not of Flexbox. | MDN: Mastering wrapping of flex items |
| grid item | A CSS Grid child, which stays in its cell rather than stretching when the last row holds fewer items. | MDN: Mastering wrapping of flex items |