About this flexbox playground
Flexbox arranges items along one line — a row or a column — and distributes space between them. It is the simplest way to center something, build a navigation bar, push a footer to the bottom, or make equal-height cards. Its properties interact in ways that are easier to see than to read about: justify-content works along the main axis, align-items across it, and both swap when you change the direction. This playground puts every property on a live stage with axis markers, so you can click through the values and watch the items respond, then fine-tune individual items with order, flex-grow, flex-shrink, flex-basis, and align-self. The generated CSS leaves out defaults, so it stays short.
How to use the flexbox playground
- Set the container. Click values for direction, wrap, justify-content, align-items, and align-content, and set the gap, or start from a preset.
- Adjust items. Add or remove items, click one, and change its order, grow, shrink, basis, or align-self.
- Press Generate CSS. Check the preview and copy or download the CSS and HTML.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content positions items along the main axis, horizontal in a row. align-items positions them on the cross axis, vertical in a row. In a column, the two swap.
How do I center a div with flexbox?
Give the parent display: flex, justify-content: center, and align-items: center. The Hero center and Modal center presets show it.
What does flex: 1 mean?
It is short for flex-grow: 1, flex-shrink: 1, flex-basis: 0%, so the item takes an equal share of the free space with other flex: 1 items.
Why does align-content do nothing?
It only affects containers with more than one line, so flex-wrap must be wrap or wrap-reverse and the items must actually wrap.
Does order change the HTML order?
No. order only changes the visual order. Screen readers and keyboard focus still follow the HTML, so keep the source order meaningful.