CSS Flexbox Generator
What display: flex does
Flexbox lays out items along a single axis and distributes the leftover space between them. CSSGen.dev's flexbox generator exposes every container property plus per-item overrides, so you can see exactly which combination of justify-content and align-items produces the layout you had in mind.
Syntax
display: flex; flex-direction: <row|column>; justify-content: <alignment>; align-items: <alignment>; gap: <length>;| Part | What it controls |
|---|---|
| flex-direction | Which way the main axis runs. row is horizontal, column vertical, and the -reverse variants flip the order without touching the markup. |
| justify-content | Distributes space along the main axis: start, center, end, space-between, space-around or space-evenly. |
| align-items | Aligns items across the cross axis. stretch is the default, which is why equal-height cards come free with flexbox. |
| flex-wrap | Lets items move onto new lines instead of shrinking past their content. align-content then spaces those lines. |
| gap | Space between items, with no margin on the outer edges. It replaced the old negative-margin workarounds entirely. |
| flex | Per item: grow, shrink and basis in one shorthand. flex: 1 makes an item absorb the free space. |
Notes from practice
The axis flips when direction does
justify-content always follows the main axis and align-items the cross axis. Switch flex-direction to column and the two swap roles, which is the single most common source of confusion.
gap removed the margin hacks
Before gap, spacing flex children meant margins plus a negative margin on the parent to cancel the outer edge. gap is supported everywhere now; there is no reason to use the old pattern.
flex: 1 is not flex-grow: 1
The shorthand sets basis to 0, so items share the space equally regardless of their content. flex-grow: 1 alone keeps the content width as the starting point and only shares the surplus.
CSS Flexbox Generator FAQ
How do I centre a div with flexbox?
Set display: flex, justify-content: center and align-items: center on the parent. That centres the child on both axes, and the parent needs a height for the vertical part to have any space to work with.
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis, which is horizontal when flex-direction is row. align-items positions them across the cross axis, which is vertical in the same case. Change the direction to column and the two swap over.
How do I make flex items equal width?
Give each item flex: 1. The shorthand sets flex-basis to 0, so all the space is shared evenly and the items end up the same width whatever their content. Using flex-grow: 1 instead keeps content width as the baseline and shares only the surplus.
When should I use flexbox instead of CSS grid?
Flexbox is one-dimensional: use it when you are laying out along a single line, such as a navigation bar, a toolbar or a row of cards that wrap. Grid is two-dimensional and better when rows and columns both need to line up. They work together — a grid cell can be a flex container.
Why is my flex item overflowing its container?
Flex items have a minimum size of auto, so they refuse to shrink below their content. Adding min-width: 0 to the item lets it shrink, which is what makes long text or a wide table wrap instead of pushing the layout wider.
Related generators
- CSS Grid — Define tracks, gaps, alignment and auto-placement, then make one item span rows and columns.
- Multi-column Layout — Flow text into balanced newspaper columns with rules, gaps and a spanning heading.
- Scroll Snap — Make carousels and galleries lock to each slide. Swipe or scroll the preview to feel it.
- Container Queries — Style a component by the width of its own container instead of the viewport.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.