CSS Flexbox Playground
Visually explore and generate Flexbox layouts.
Flexbox Playground
Master CSS flex layouts interactively.
flex-direction
justify-content
align-items
flex-wrap
Live Playground
1
2
3
4
5
RESIZE CONTAINER
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}Mastering Flexbox
The Flexible Box Layout Module (Flexbox) provides a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.
The Main Axis vs. Cross Axis
The key to understanding flexbox is to think in terms of two axes: the main axis and the cross axis.
- Main Axis: Defined by
flex-direction. If it isrow, the main axis is horizontal. If it'scolumn, the main axis is vertical. - Cross Axis: Perpendicular to the main axis.
Alignment Properties
justify-content aligns items along the main axis. It dictates how free space is distributed between and around the items.
align-items aligns items along the cross axis. It determines how items are laid out perpendicular to the main axis (e.g., stretching them to fill the container height in a row layout).
Related Guides
Deepen your understanding with our expert articles.