A navigation bar
Use row, nowrap, center cross-axis alignment, and space-between justification. The spaces depend on remaining free space after item sizes and gaps.
Container rules
Interactive layout
Click a numbered item to edit it. Wide previews scroll on small screens.
Align-content distributes flex lines when wrapping creates several lines. Flex-basis follows the main axis, so it controls width in a row and height in a column. Visual order leaves DOM and keyboard order unchanged.
Apply flex-layout to the parent of 4 elements. Width is a preview setting; the exported container fills available width. Decorative tile styling is omitted.
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the Flexbox Playground
- 01
Start with wrapping cards, a navigation bar, or vertical panels.
- 02
Set direction, wrap, gap, and the two axis alignment controls.
- 03
Click a preview item or choose its number to edit flex and align-self values.
- 04
Change the simulated width to inspect wrapping, then export the layout CSS.
Examples
A growing content area
Set one item to grow 1 while the others remain grow 0. That item receives available main-axis free space after basis sizes are accounted for.
Follow the main axis
A row places the main axis horizontally; a column places it vertically. Justify-content works along that main axis. Align-items sets cross-axis alignment, and align-self overrides it for a single item. Row-reverse and column-reverse change visual direction but do not rewrite the source order.
Basis, growth, and wrapping
Flex-basis supplies the initial main-axis size before flex distribution. Grow shares positive free space; shrink participates when items need to contract. Wrapping creates additional flex lines. Align-content distributes those lines when there is extra cross-axis space; it is easiest to see with multiple lines and a generous container height.
Common questions
Why does order not change keyboard navigation?
Order affects painting and layout order. Keyboard and assistive-technology reading order generally follows the document. Keep the source sequence meaningful.
Does the exported CSS include the preview width?
No. Width is a simulation setting. The export includes container and numbered child rules; add your own responsive width and decorative item styles.
Why do long words affect my real layout differently?
Intrinsic content sizes, min-width, and wrapping rules influence flex sizing. The export sets min-width: 0 on children, but you should test it with your actual content.