Flexbox & Grid Generator
This flexbox and grid generator builds a container and shows the result on real items, so you can see what each property does rather than trying to remember which of justify-content and align-items runs along which axis. That confusion is precisely what the tool is for: in a row, justify-content moves items horizontally and align-items vertically — and the moment you switch to a column they swap over, because both are defined relative to the flex direction rather than to the screen. Grid mode covers the same ground with columns and rows, and both produce copyable CSS that matches the preview exactly.
How it works
Builds a flexbox or grid container and shows the result on real items, so you can see what each property does rather than remembering which of justify-content and align-items runs along which axis.
That confusion is the point of the tool: in a row, justify-content moves items horizontally and align-items vertically — and in a column they swap, which catches people out constantly.
Everything runs in your browser — nothing you enter is sent to a server.
The two axes
Every flexbox property is defined relative to the flex direction, not the screen:
| Direction | Main axis (justify-content) | Cross axis (align-items) |
|---|---|---|
| row | Horizontal | Vertical |
| column | Vertical | Horizontal |
This is the whole trick. Once you think in main and cross rather than horizontal and vertical, the properties stop seeming arbitrary.
Centring something
display: flex;
justify-content: center;
align-items: center;Both axes centred, in three lines, regardless of the element's size. This is what replaced two decades of workarounds.
Flexbox or grid
- Flexbox — one direction. A toolbar, a row of cards, a stacked form.
- Grid — two directions at once. A page layout, a gallery, anything where rows and columns both need control.
They are not competitors. A grid page layout containing flexbox toolbars is the normal arrangement.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content works along the main axis and align-items along the cross axis. In a row the main axis is horizontal; in a column it is vertical — so the two swap when you change direction.
Why do my properties stop working when I switch to column?
Because they are defined relative to the flex direction, not the screen. Switching to column swaps which one is horizontal, which is the single most common source of flexbox confusion.
When should I use grid instead of flexbox?
Grid for two-dimensional layouts where rows and columns both matter. Flexbox for a single row or column of items. Many layouts genuinely want both, nested.
What does align-content do?
It distributes the rows themselves when items wrap onto multiple lines. It has no effect at all without wrapping, which is why it so often seems to do nothing.
Does gap work in flexbox?
Yes, in every current browser. It replaced the old approach of margins on children plus a negative margin on the parent, which was fiddly and leaked.
Is anything uploaded?
No. Everything runs in your browser.
Related tools
CSS Formatter & Beautifier
This CSS formatter puts one declaration per line and normalises spacing without rewriting your values.
CSS Validator
This CSS validator finds unbalanced braces, missing colons and unclosed comments by line.
CSS Button Generator
This button generator builds a complete style including hover and active states.