Flexbox generator
Change direction, wrapping, alignment and gap and watch the boxes move. Select any item to give it its own grow, shrink, basis and order, then copy the generated CSS and HTML.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Pick flex-direction, flex-wrap, justify-content and align-items. The preview reacts at once.
- Set the gap between items and the number of items.
- Select an item to give it its own grow, shrink, basis and order. The selected item is outlined in the preview.
- Copy the CSS for the container and items, and the matching HTML.
What the output means
The .container rule lists every container property, including values that equal the browser defaults, so the copied code explains itself. Items with non-default values get a rule like .item-1 { flex: 1 1 0; order: 2; }. A basis of 0 is written without units, an empty basis as auto.
Example
To center one box in its parent, use justify-content: center and align-items: center. To spread three buttons with equal space between them, use justify-content: space-between.
Tips
- A container needs a height larger than its items for
align-items and align-content to show any difference. The preview is fixed at a height that makes them visible.
order changes only the visual order. Screen readers and tab order still follow the HTML.gap works for flexbox in all current browsers and replaces the old trick of margins on every item.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis, which is horizontal for row and vertical for column. align-items aligns them on the cross axis, the other direction. Switching flex-direction swaps which one is horizontal.
When does align-content do anything?
Only when the container has more than one line of items, which needs flex-wrap set to wrap or wrap-reverse and enough items to fill more than one line. With nowrap the property has no effect, so this tool leaves it out of the CSS.
What do grow, shrink and basis mean?
flex-grow says how much of the free space an item takes, flex-shrink how much it gives up when space is short, and flex-basis is its starting size before either happens. They are written together as the flex shorthand, for example flex: 1 1 0.
Why are some items missing from the CSS?
An item with grow 0, shrink 1, basis auto and order 0 matches the browser defaults, so it needs no rule. Only items you change get an .item-N rule.