About the CSS Flexbox Generator
Flexbox is the CSS layout system for arranging items in a row or a column and spreading them out. Its properties are easy to forget, and it is hard to picture what they do. This generator lets you choose the direction, how the items are spaced along the line, how they line up across it, whether they wrap and the gap, shows a live preview with numbered boxes and writes the CSS for you to copy. Type the direction, the two alignment settings, the wrap, the gap and the number of items and the CSS flexbox appears at once, with a few related figures underneath, and you can copy the result with one tap. The sums run in your browser, so nothing you enter is uploaded.
Updated October 2026
How to use the CSS Flexbox Generator
- 1Enter the direction, the two alignment settings, the wrap, the gap and the number of items.
- 2Pick the units or options from the menus if the CSS flexbox tool offers them.
- 3Read the CSS flexbox in the large result box.
- 4Look at the extra rows for related figures.
- 5Press Copy result to keep the answer.
When you need the CSS flexbox
Front-end developers use it to learn flexbox and to produce the first draft of a navigation bar, a card row, a toolbar or a centred box. Designers use it to see how layouts react before they write code.
For vertical centring, set the container height and use align-items: center. For a pinned footer, use a column layout. The preview boxes have different heights so that you can see the effect of align-items.
How the CSS flexbox is worked out
The container gets display: flex. flex-direction sets the main axis. justify-content spaces items along the main axis and align-items places them across it. flex-wrap lets items move to new lines, and gap sets the space between them. Choosing row, centre, centre, nowrap and a gap of 8 pixels gives display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 8px; and the preview shows four boxes centred in a row. Switching to space-between spreads them across the width.
Every answer on this page comes from that one rule, so you can check any result by hand with a calculator. The figures shown underneath, such as other units, are conversions of the same answer.
- All main flex properties
- Live numbered preview
- Copy-ready CSS
Mistakes to avoid with CSS flexbox
The preview shows the container only; items in your real page can also use flex-grow, flex-shrink, flex-basis and align-self, which this tool does not set. For two-dimensional layouts with rows and columns together, CSS grid may be a better choice.
On phone and computer
On a phone, type into the boxes one after another and read the CSS flexbox underneath; Copy result puts it on the clipboard for a message or a note. On a computer the inputs sit on the left and the answer on the right, so you can change one figure and watch the CSS flexbox move. The css flexbox generator works the same on both. Layout is only part of a style. Compare it with CSS Grid Generator for two-dimensional layouts, and add CSS Box Shadow Generator, CSS Gradient Generator and Border Radius Generator for the look.
Features
- Container height for vertical centring
- Wrap lets items flow
- Grid for 2D layouts
- Clear messages when the CSS flexbox inputs make no sense
- Copy the result with one tap
- Private: nothing is uploaded
Frequently asked questions
How do I calculate CSS flexbox?
The container gets display: flex. flex-direction sets the main axis. justify-content spaces items along the main axis and align-items places them across it. flex-wrap lets items move to new lines, and gap sets the space between them. Choosing row, centre, centre, nowrap and a gap of 8 pixels gives display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 8px; and the preview shows four boxes centred in a row. Switching to space-between spreads them across the width.
What is the formula for CSS flexbox?
The container gets display: flex. flex-direction sets the main axis. justify-content spaces items along the main axis and align-items places them across it. flex-wrap lets items move to new lines, and gap sets the space between them. The css flexbox generator applies it exactly and rounds only the displayed answer to six significant figures.
What is the main axis?
The direction items are laid out in. For row it runs left to right, and for column top to bottom.
What is the difference between justify-content and align-items?
The first works along the main axis and the second across it.
When should I use grid instead?
When you need to control rows and columns at once.
Is this css flexbox generator free and private?
Yes. It is free, needs no account and runs in your browser, so the numbers you type are not uploaded or stored.