Flexbox Playground
Free online flexbox playground. Toggle flex-direction, justify-content, align-items, and flex-wrap to watch boxes rearrange in real time, then copy the CSS.
Flexbox Playground
Free online flexbox playground. Toggle flex-direction, justify-content, align-items, and flex-wrap to watch boxes rearrange in real time, then copy the CSS.
About CSS flexbox
What flexbox does
Flexbox lays a set of boxes out in one dimension and shares the free space among them. Set display: flex on a container and its direct children become flex items that line up in a row (or column) and can grow, shrink, and align together. This tool turns every property into a button so you can see each effect immediately.
Main axis vs cross axis
flex-direction decides the main axis: row runs left-to-right, column runs top-to-bottom. justify-content aligns items along that main axis, while align-items aligns them along the perpendicular cross axis. Once you know which axis a property acts on, justify-content and align-items stop being confusing.
FAQ
Common questions and answers about this topic.
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (the direction set by flex-direction); align-items aligns them along the cross axis (perpendicular to it). Flip flex-direction between row and column here and watch which one moves the boxes.
What does flex: 0 1 auto mean?
flex is shorthand for flex-grow, flex-shrink, and flex-basis in that order. 0 1 auto means the item will not grow, may shrink if space runs out, and starts at its content size. Select a box and edit the three values to see the shorthand in the generated CSS.
Is my data sent to any server?
No. Everything runs entirely in your browser, and nothing you enter leaves your device.