Glossary
14 terms from "CSS Flexbox: Stop Fighting Your Layouts." 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 |
| 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 |
| 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 |
| 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-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-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-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 |
| 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 |