CSS Flexbox Generator
Visually build CSS flexbox layouts with live preview and copy-ready code.
About this calculator
Choose direction, justify-content, align-items, wrap and gap, and see boxes rearrange live. Copy the CSS when it looks right.
Every control updates a live preview and the CSS code at once. Copy the declaration into your stylesheet.
How to use it
- Pick the direction, justify and align values.
- Set the gap and number of items.
- Press Copy CSS.
The flexbox model
A flex container lays items along a main axis set by flex-direction (row is horizontal, column vertical). justify-content distributes items along the main axis; align-items aligns them on the cross axis. flex-wrap lets items move to a new line; gap adds space between them.
Worked example
Recipes
| Centre anything | display:flex; justify-content:center; align-items:center |
| Navbar | display:flex; justify-content:space-between; align-items:center |
| Equal columns | display:flex; gap:16px; (children flex:1) |
Tips and common mistakes
- Use gap instead of margins between items.
- Remember justify follows the main axis, so it flips with column.
- Set min-width:0 on flex children that contain long text.
- Use flex-wrap for responsive card rows.
- For two-dimensional layouts use CSS Grid.
Frequently asked questions
What is flexbox?
A CSS layout mode for arranging items in a row or column.
What is the difference between justify-content and align-items?
Main axis versus cross axis.
How do I centre a div?
display:flex with justify-content and align-items set to center.
What does flex:1 do?
Makes an item grow to share free space equally.
Flexbox or Grid?
Flexbox for one dimension, Grid for two.
What does wrap do?
Lets items flow onto new lines.