About CSS Flexbox
The Flexbox Generator lets you build CSS Flexbox layouts visually. Change the flex-direction, justify-content, align-items, wrap and gap, and a live row of items rearranges so you can see exactly what each property does — then copy the CSS. It is a fast way to learn and produce one-dimensional layouts.
How Flexbox works
How to build a flex layout
- Choose the flex-direction (row or column) and number of items.
- Set justify-content (main axis) and align-items (cross axis), plus wrap and gap.
- Watch the preview and copy the generated CSS.
Main axis vs cross axis
justify-content positions items along the main axis (horizontal for a row), while align-items positions them on the cross axis. Flexbox is ideal for one-dimensional layouts — a row of nav links, a card footer, or centring content.
Centre anything
To perfectly centre an item, set both justify-content and align-items to center — the classic Flexbox centring trick.
Common uses
- Centre elements horizontally and vertically
- Build navigation bars
- Space out buttons and cards
- Create responsive rows that wrap
- Align form controls
- Learn how Flexbox properties behave
- Distribute items evenly
- Copy ready-made Flexbox CSS
Frequently asked questions
How do I centre a div with Flexbox?
Set the container to display:flex with justify-content:center and align-items:center.
What is the difference between Flexbox and Grid?
Flexbox is for one-dimensional layouts (a row or a column); Grid handles two dimensions (rows and columns).
What does justify-content do?
It distributes items along the main axis — start, center, end, or with space between/around.
What is align-items?
It aligns items on the cross axis (perpendicular to flex-direction).
How does gap work?
It adds consistent spacing between flex items without margins.
Is the CSS production-ready?
Yes — copy it straight into your stylesheet.
Is anything uploaded?
No — it runs entirely in your browser.
Is it free?
Yes — completely free with no sign-up.