Flexbox Generator
Set up a flexbox layout with live controls, adjust each item on its own, and copy clean CSS and HTML. Nothing to install and nothing uploaded.
What this generator does
It lets you set up a flexbox layout by changing the controls and watching the result, and then gives you the CSS and HTML to copy. Change the container settings on the left, click any item to give it its own grow, shrink, basis, alignment and order, and the code updates as you go. Only values that differ from the defaults are written out, so the CSS stays short.
The container properties
| Property | What it controls |
|---|---|
flex-direction | The main axis: left to right (row) or top to bottom (column), or reversed. |
flex-wrap | Whether items stay on one line or move to the next line when they run out of room. |
justify-content | How items are spread along the main axis, such as packed at the start, centered or spaced apart. |
align-items | How items line up on the cross axis, for example centered vertically in a row. |
align-content | How multiple wrapped lines are spread on the cross axis. It does nothing unless wrapping is on and there is more than one line. |
gap | The space between items, without margins on the items themselves. |
The item properties
flex-grow says how much spare space an item takes, so two items with 1 and 2 share it one third to two thirds. flex-shrink says how willingly it gets smaller when space runs out, and 0 stops it shrinking. flex-basis is the starting size before growing or shrinking. align-self overrides align-items for one item and order changes its position without touching the HTML. A common recipe is flex: 1 1 0 to make equal columns, or flex: 0 0 200px for a fixed sidebar.
When to use grid instead
Flexbox arranges items in one direction at a time. If you need rows and columns lining up together, use the Grid Layout Generator. Before you ship, the CSS Minifier will tidy the stylesheet.
Frequently asked
What is the difference between justify-content and align-items?
justify-content spreads items along the main axis, which is horizontal for a row. align-items lines them up on the cross axis, which is vertical for a row. If you switch the direction to column, the two swap.
How do I center something with flexbox?
On the container set justify-content to center and align-items to center. The item sits in the middle both ways, as long as the container has some height.
Why does align-content do nothing?
It only applies when wrapping is on and the items fill more than one line. With a single line, use align-items. Turn on wrap and add more items to see it work.
What does flex: 1 mean?
It is shorthand for flex-grow 1, flex-shrink 1 and flex-basis 0, which makes items share the available space equally. Set it on every item for equal-width columns.
What is flex-basis and how does it differ from width?
flex-basis sets an item's starting size along the main axis before spare space is shared out. It overrides width in a row layout, and it works as height in a column layout.
Are flexbox and gap supported everywhere?
Flexbox works in all current browsers. The gap property for flexbox is supported in current Chrome, Edge, Firefox and Safari, so you can use it without margin workarounds.