CSS Flexbox Generator
Play with every flexbox property on a live layout, click any item to set its flex-grow, shrink, basis, order or align-self, and copy clean CSS and HTML. Runs entirely in your browser.
Container
Item 1
How to use the CSS Flexbox Generator
- Pick a preset or start with the basic row of four items.
- Set the container: choose flex-direction, wrap, justify-content, align-items and the gaps, and watch the preview update.
- Click an item in the preview to select it, then change its flex-grow, flex-shrink, flex-basis, order or align-self.
- Add or remove items to test how the layout behaves with more content.
- Press Copy CSS and Copy HTML to use the layout in your project.
Flexbox cheat sheet
| Property | Applies to | Default | What it controls |
|---|---|---|---|
flex-direction | Container | row | Main axis: row, row-reverse, column or column-reverse |
flex-wrap | Container | nowrap | Whether items may break onto new lines |
justify-content | Container | normal (acts as flex-start) | Spacing of items along the main axis |
align-items | Container | normal (acts as stretch) | Position of items on the cross axis |
align-content | Container | normal (acts as stretch) | Spacing of wrapped lines on the cross axis |
gap | Container | 0 | Space between items (row-gap and column-gap) |
flex-grow | Item | 0 | Share of the free space the item takes |
flex-shrink | Item | 1 | How much the item shrinks when space runs out |
flex-basis | Item | auto | Starting size before growing or shrinking |
order | Item | 0 | Visual order (lower comes first) |
align-self | Item | auto | Overrides align-items for one item |
Worked example: how flex-grow shares space
A 900px wide row holds three items with flex-basis: 200px and no gap. Their bases add up to 600px, leaving 300px of free space. If the items have flex-grow values of 1, 1 and 1, each gets 300 ÷ 3 = 100px extra and ends up 300px wide. With values 2, 1 and 0, the free space is split into 3 shares of 100px: the first item becomes 200 + 200 = 400px, the second 200 + 100 = 300px and the third stays at 200px.
Shrinking works the other way, but is weighted by size: when items overflow, each shrinks in proportion to flex-shrink × flex-basis, so larger items give up more space. Set flex-shrink: 0 on anything that must keep its size, like a fixed sidebar.
Common flex shorthands
| Shorthand | Equals | Use it for |
|---|---|---|
flex: initial | 0 1 auto | The default: size to content, may shrink |
flex: 1 | 1 1 0% | Equal-width columns |
flex: auto | 1 1 auto | Grow from content size |
flex: none | 0 0 auto | Fixed size that never grows or shrinks |
flex: 0 0 200px | 0 0 200px | Fixed 200px sidebar |
Need rows and columns at the same time? A grid layout is the better tool for full page templates. Tidy the final code with the CSS Formatter and HTML Formatter.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis (horizontally for flex-direction: row), and align-items positions them on the cross axis (vertically for a row). When you switch to flex-direction: column, the axes swap.
When does align-content do anything?
Only when the container has flex-wrap: wrap (or wrap-reverse) and the items actually wrap onto more than one line, with extra space in the cross direction. It positions the lines as a group, much like justify-content does for items.
What does flex: 1 mean?
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Every item with flex: 1 starts from zero width and shares the free space equally, which is how you make equal-width columns.
What is the difference between flex-basis and width?
flex-basis sets the item's starting size along the main axis before free space is shared out, and it takes priority over width in a row (or height in a column). flex-basis: auto falls back to the item's width or its content size.
How do I center a div with flexbox?
Give the parent display: flex, justify-content: center and align-items: center, and give it a height. The child is centered horizontally and vertically. The Perfect center preset generates exactly that.
Does the order property affect accessibility?
Yes. order only changes the visual order; screen readers and keyboard Tab order still follow the HTML source. Use it for small visual tweaks, and change the HTML order when the reading order matters.
Should I use flexbox or CSS grid?
Use flexbox for one-dimensional layouts where items flow in a row or a column (navbars, toolbars, card rows, centering). Use CSS grid for two-dimensional layouts where you control rows and columns at the same time, such as page templates.