CSS Flexbox Generator
Interactive Flexbox playground: set flex-direction, wrap, justify-content, align-items, align-content, gap and each item’s flex-grow, watch a live container, see exactly how the free space is shared, and copy the CSS.
How to Use
- Pick the flex-direction — row, row-reverse, column or column-reverse. It sets the main axis.
- Choose justify-content for the main axis, align-items for the cross axis, and turn on flex-wrap to let items break onto new lines (then align-content spaces the lines).
- Set the gap, the number of items, each item’s flex-basis and a flex-grow pattern such as
1 2 1 0; the container size is the sample the maths uses. - Watch the live preview, and read the readouts for the free space, the lines and each item’s final size.
- Read Show Work for how the free space was shared out, then press Copy CSS.
Worked Example
Four 100 px items in a 600 px row with a 10 px gap. The items take 4 × 100 = 400 px and the three gaps 3 × 10 = 30 px, so the free space is 600 − 430 = 170 px.
With justify-content: space-between it goes between the items: 170 ÷ 3 = 56.67 px each, so neighbours are 56.67 + 10 = 66.67 px apart. With space-evenly all five spaces are 170 ÷ 5 = 34 px; with space-around each item gets 170 ÷ 4 = 42.5 px, half on each side, so the edges get 21.25 px.
Give the items flex-grow 1, 2, 1 and 0 instead. The grow factors add up to 4, so the 170 px is shared 1/4, 2/4, 1/4 and 0: 42.5, 85, 42.5 and 0 px. The items end at 142.5, 185, 142.5 and 100 px and justify-content has nothing left to share.
The common mistake: expecting flex-grow: 2 to be twice as wide. Above, the flex-grow: 2 item is 185 px against 142.5 px — only 1.30 times as wide, because the 100 px basis is shared equally first. For true 1 : 2 : 1 proportions, set the basis to 0 with flex: 1, flex: 2, flex: 1: three items in 600 px with two 10 px gaps share 580 px as 145, 290 and 145 px.
Show Work
Formulas
How Flexbox Replaced Floats
Before flexbox, side-by-side layouts were built with floats, inline-blocks and tables, and vertical centring was a famous puzzle. The first Flexible Box Layout draft appeared in 2009 (display: box, based on Mozilla’s XUL layout), was rewritten in 2011 (display: flexbox) and settled in 2012 on today’s display: flex syntax — which is why old code sometimes carries three generations of prefixes.
The 2012 syntax reached Candidate Recommendation and was supported unprefixed in Chrome 29 (2013), Firefox 28 (2014) and Safari 9 (2015). The gap property, first defined for grid, came to flex containers later: Firefox 63 in 2018, Chrome 84 in 2020 and Safari 14.1 in 2021. Before that, spacing between flex items needed margins and negative-margin tricks.
About This Tool
This tool sets up a flex container with every container property — direction, wrap, justify-content, align-items, align-content and gap — plus each item’s flex-basis, flex-grow and flex-shrink, and shows the result live. It works out the free space the way the browser does: which items share each line, how flex-grow or flex-shrink changes their sizes and how justify-content spreads what is left. Show Work ends with the sizes the browser actually drew, so the maths can be checked.
The container width and height are a sample so the numbers are exact; the copied CSS works at any size. Everything runs in your browser. Settings can be shared with URL parameters such as ?dir=column&justify=center&count=3.
Related tools: CSS Grid Generator, CSS clamp() Generator, and CSS Box-Shadow Generator.
Frequently Asked Questions
What is the difference between justify-content and align-items?
They work on opposite axes. justify-content shares out the free space along the main axis (horizontal for row, vertical for column); align-items places each item on the cross axis. justify-content: center; align-items: center; centres a box both ways — a 120 px box in a 600 px row gets 240 px on each side.
How does flex-grow share the space?
First every item takes its flex-basis and the gaps are taken off. What is left is the free space, and it is split in proportion to flex-grow. Four 100 px items with 10 px gaps in 600 px leave 600 − 400 − 30 = 170 px; with flex-grow 1, 2, 1, 0 the shares are 42.5, 85, 42.5 and 0 px, so the items end at 142.5, 185, 142.5 and 100 px.
Why isn’t my flex-grow: 2 item twice as wide?
Because flex-grow shares only the free space, not the whole width. In the example above the flex-grow: 2 item is 185 px against 142.5 px, only 1.30 times as wide. To get exact 1 : 2 : 1 widths, set the basis to 0 (flex: 1, flex: 2, flex: 1): in 600 px with two 10 px gaps that gives 145, 290 and 145 px.
What do space-between, space-around and space-evenly do?
With 170 px of free space and 4 items: space-between puts it all between items, 170 ÷ 3 = 56.67 px per gap; space-around gives each item 170 ÷ 4 = 42.5 px split on both sides, so the edges get 21.25 px; space-evenly makes all five spaces equal, 170 ÷ 5 = 34 px. All of these come on top of the gap property.
What happens when the items don’t fit?
With flex-wrap: nowrap they shrink. flex-shrink (1 by default) takes the overflow off in proportion to shrink × basis: six 120 px items with 10 px gaps need 770 px, 170 px too many for 600, so each loses 28.33 px and ends at 91.67 px. Set flex-shrink to 0 and they keep their size and overflow instead; set wrap and they move to a new line.
How do I use the CSS Flexbox Generator?
Simply pick your options and read the result, which refreshes the instant you change something. There is nothing to submit and nothing to wait for.
Does it cost anything or need an account?
No. The tool is completely free, there is no account to create, and it keeps working offline after the page first loads.
Is anything I type uploaded?
No. The tool works entirely on your device, so the values you enter never leave your browser.
Common Use Cases
Centring
One 120 px box in a 600 px row with justify-content and align-items both centre: 240 px either side, on both axes.
Navigation bars
space-between pushes the first and last links to the edges: four 100 px links in 600 px end up 66.67 px apart.
Sidebar and content
A fixed sidebar with flex: 0 0 240px and content with flex: 1 takes whatever width is left.
Wrapping card rows
Eight 180 px cards with a 12 px gap in 600 px wrap three to a line (564 px), leaving lines of 3, 3 and 2.
Learning the axes
Switch between row and column to see justify-content and align-items swap the direction they work in.
Last updated: