Flexbox
CSS Flexible Box Layout — a one-dimensional layout model for arranging items in a row or column with alignment, distribution, and reordering. The go-to for nav bars, toolbars, card rows, and centering anything. Replaces float-based hacks.
- Rows/columns of items.
- Centering content.
- Nav bars, toolbars, card layouts.
- 2D grid layouts (use CSS Grid).
- Page-level layout (Grid is better).
Definition
Flexbox lays out items along a main axis (row or column). The container controls distribution (justify-content), cross-axis alignment (align-items), wrapping (flex-wrap), and spacing (gap). Items can grow/shrink (flex-grow, flex-shrink) and reorder (order).
Why it exists
Floats and inline-block were hacks for layout. Flexbox provides a real layout system for 1D arrangements with proper alignment and space distribution.
How it works
Set display: flex on a container. Children become flex items. justify-content aligns on the main axis; align-items on the cross axis. flex: 1 makes items grow to fill space. gap adds spacing between items. flex-wrap allows wrapping to multiple lines.
Scaling limits
One-dimensional only (use Grid for 2D). Complex nested flex can be hard to reason about. Older browsers have partial support (mostly resolved now).
Cost shape
Free, built into CSS.
Alternatives
- CSS Grid — 2D layout for full pages; Flexbox is 1D.
- Floats — Legacy, avoid for new layouts.
Failure modes
- flex-grow/shrink confusion causing unexpected sizing.
- min-width: auto preventing shrinkage.
- Nested flex direction confusion.