# CSS Flexbox
Confidence: high
Last verified: 2026-05-22
Generation: human_only


## TL;DR

Flexbox provides one-dimensional layout (row or column), distributing space and aligning items within a container. `display: flex` on parent enables flex context. Key properties: `justify-content` (main axis alignment), `align-items` (cross axis), `flex-grow/shrink/basis` (item sizing).

## Core Explanation

Flex container properties: `flex-direction` (row|column), `flex-wrap` (wrap|nowrap), `gap`. Flex item: `flex: grow shrink basis` shorthand. `align-self` overrides cross-axis alignment per item. `order` changes visual order without HTML changes. Flexbox is ideal for navigation bars, card layouts, centering, and distributing space in one dimension.

## Further Reading

- [CSS Flexible Box Layout Module Level 1 (W3C)](https://www.w3.org/TR/css-flexbox-1/)