Loading page content
An interactive flexbox playground: change flex-direction, justify-content, align-items, flex-wrap, gap, and per-item flex properties and watch the layout respond immediately, with the CSS shown alongside.
Experiment with CSS Flexbox properties interactively. Adjust container and child properties to see how flex layout works in real time.
Presets
Container Properties
flex-direction
justify-content
align-items
flex-wrap
Preview
Click an item to edit its individual flex properties.
Generated CSS
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
The concept that makes flexbox click is the two axes. justify-content works along the main axis, align-items along the cross axis, and which is which flips entirely when you change flex-direction from row to column. Almost every flexbox confusion traces back to reaching for justify-content when you needed align-items, or the reverse, because the direction changed.
The other one is the flex shorthand. flex: 1 expands to flex: 1 1 0%, which sets flex-basis to zero and makes items share space equally regardless of content. flex: auto expands to flex: 1 1 auto, which sizes items by their content first and then distributes what is left. Those produce visibly different layouts and the difference is entirely in the basis.
For layout across two dimensions at once, grid is usually the better tool. Flexbox distributes along one axis; grid defines rows and columns simultaneously. Reaching for flexbox to build a page-level layout is where you end up fighting it with nested containers.