Overview
This page is the atomic definition. Full CSS layout guidance lives at css.
Definition
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model controlled by display: flex on a container. Items are distributed along the main axis (row or column) using justify-content and along the cross axis using align-items. Key properties: flex-grow controls how items expand to fill remaining space; flex-shrink controls contraction; flex-basis sets the initial size before distribution. flex-wrap: wrap allows items to wrap to new lines, creating a multi-line layout that still treats each line independently (unlike Grid, which tracks both axes). Flexbox is ideal for navigation bars, toolbars, card footers with space-between, and centering content both vertically and horizontally inside a container. For two-dimensional layouts where row and column alignment must stay synchronized, use css-grid.
When it applies
Use Flexbox whenever you need to distribute items along a single axis, center content, or push items to opposing ends with space-between. Use Grid when layout requires alignment across both rows and columns at the same time.
Example
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
height: 56px;
}Related concepts
- css - the full CSS layout and specificity guide.
- css-grid - the two-dimensional complement to Flexbox.
- viewport - use viewport units with flex containers for full-height layouts.
- tailwind - Tailwind exposes Flexbox via
flex,items-*,justify-*utilities.
Citing this term
See CSS Flexbox (llmbestpractices.com/glossary/css-flexbox).