CSS Flexbox generator
Change the container and item properties and see instantly how they are laid out. It is the quickest way to understand flexbox without writing code blindly: when you like the result, copy only the CSS you changed.
Processed 100% in your browser
Click an item in the preview to edit it.
Ctrl + Enter runCtrl + C copy result
How to use
- 1Adjust the container’s direction, wrapping, justification and alignment.
- 2Choose how many items to show in the preview.
- 3Click an item to change its grow, shrink, basis, align-self and order.
- 4Copy the generated CSS.
Use cases
- Center an element both horizontally and vertically.
- Build a navigation bar with evenly spaced links.
- Create a row of cards that wraps onto several lines on small screens.
- Learn the difference between justify-content and align-items.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis (the row, by default) and align-items aligns them on the cross axis. If you switch the direction to column, the axes swap.
How do I center an element with flexbox?
On the container use justify-content: center and align-items: center. The container needs a height for vertical centering to be visible.
What does flex: 1 1 auto mean?
It is grow, shrink and basis: how much the item may grow, how much it may shrink and its starting size before leftover space is shared out.
When should I use flexbox and when grid?
Flexbox is ideal for laying items out in one dimension, a row or a column. For grids of rows and columns at once, use CSS Grid.