How to use this Flexbox Generator
Choose the flex direction, set how items should be distributed across the main axis, adjust
cross-axis alignment, and decide whether items should wrap. The live preview updates instantly
so you can see the layout behavior immediately. When it looks right, copy the generated CSS
and paste it into your stylesheet or component.
- Choose the flex direction.
- Set justify-content to control main-axis distribution.
- Set align-items to control cross-axis alignment.
- Choose whether items should wrap.
- Preview the result and copy the CSS.
What this tool generates
The generated output includes the main Flexbox container rules:
display: flex, flex-direction,
justify-content, align-items, and
flex-wrap.
Common use cases
- Navigation bars
- Button rows
- Centered content blocks
- Horizontal or vertical stacks
- Wrapped responsive item rows
Flexbox is one-dimensional — that is the whole design
Flexbox lays out items along a single axis at a time: a row or a column. Everything
it does follows from that. justify-content distributes items along the main
axis (the direction set by flex-direction), and align-items
positions them on the cross axis. Switch flex-direction from
row to column and those two properties silently swap which visual
direction they control — the single most common reason a layout that centered perfectly
suddenly stops centering after you change the direction.
Grid, by contrast, is two-dimensional: it places items into rows and columns
simultaneously. The two are not rivals. They compose. A flex item can itself be
display: grid, and a grid cell can be display: flex. A typical
page uses Grid for the overall page skeleton and Flexbox for the small clusters inside it —
a nav bar, a button group, a card footer with an avatar and a timestamp. If you find
yourself fighting Flexbox to align things in two directions at once, that is the signal to
reach for Grid instead.
Why flex: 1 is not the same as flex-grow: 1
This trips up almost everyone. The shorthand flex: 1 expands to
flex: 1 1 0% — grow 1, shrink 1, and a flex-basis of 0.
Writing flex-grow: 1 on its own leaves flex-basis at its default
of auto, which means the item starts at its content size and only shares out
the leftover space.
The practical difference: put three items in a row, one with a long label and two with short
ones. With flex: 1 on each, all three end up the same width, because the basis
is 0 and the grow factor divides the entire row equally. With flex-grow: 1 on
each, the long item stays wider, because every item keeps its content width first and only
the remaining space is split. Neither is wrong — but if you wanted equal columns and reached
for flex-grow: 1, you will get unequal ones and wonder why. Use
flex: 1 for equal tracks; use flex-grow: 1 when you want content to
keep its natural size and just soak up slack.
The overflow bug: why long text blows out a flex item
You build a two-column flex layout, drop a long unbroken string or a <pre>
block into one column, and the whole row overflows its container instead of the item
shrinking and the text wrapping. This is not a bug in your CSS — it is the specified
behavior, and it catches people constantly.
Every flex item has an implicit min-width: auto (or min-height: auto
in a column). That automatic minimum resolves to the item's min-content size:
roughly the longest word or the widest unbreakable child. Flexbox will happily shrink an item
down to that minimum, but no further — so if the content's min-content size is wider than the
space available, the item refuses to shrink and pushes past its parent.
The fix is one line: set min-width: 0 (or min-height: 0) on the flex
item, which removes the automatic floor and lets it shrink so the text can wrap. Setting any
overflow value other than visible — hidden,
auto, scroll — resets the same minimum to 0 as a side effect, which
is why adding overflow: hidden sometimes mysteriously fixes an overflow you never
expected it to touch. In deeply nested flex layouts you may need min-width: 0 on
each level, because the rule applies to every flex item in the chain.
flex-basis vs width: which one wins
When an item is a flex item, flex-basis is the property that sets its size along
the main axis, and it takes precedence over width (in a row) for that initial
main-size calculation. If you set both width: 200px and
flex-basis: 300px on a row item, the item starts from 300px. width
has not stopped mattering entirely — it still feeds the min/max constraints and applies on the
cross axis — but it is no longer the number that drives main-axis sizing.
The one value to understand is flex-basis: auto, the default. "Auto" means "look
at my width (or height) property; if that is also auto, use my
content size." So width is not ignored — it becomes the basis when the basis is
auto. This is why some layouts respond to width and others ignore it: the moment
you give flex-basis an explicit length, the item's own width stops
being consulted for its main size.
Frequently Asked Questions
Why does my long text overflow the flex item instead of wrapping?
Flex items have an implicit min-width: auto that stops them shrinking below
their min-content size (the longest unbreakable word or child). Set
min-width: 0 on the item so it can shrink and the text can wrap. Any
overflow value other than visible resets the same minimum, which
is why overflow: hidden often fixes it too.
What is the difference between flex: 1 and flex-grow: 1?
flex: 1 expands to flex: 1 1 0%, so items ignore their content
width and divide the row into equal tracks. flex-grow: 1 leaves
flex-basis: auto, so items keep their content size first and only share the
leftover space, producing unequal widths. Use flex: 1 for equal columns.
Should I use Flexbox or CSS Grid?
Use Flexbox when you are aligning items along one axis — a nav bar, a button row, a card
footer. Use Grid when you need rows and columns at the same time, like a page skeleton or
a gallery. They compose: a grid cell can be display: flex and a flex item can
be display: grid.
Why did my centered layout break when I changed flex-direction?
justify-content works on the main axis and align-items on the
cross axis. Switching from row to column swaps which visual
direction each one controls, so the two properties effectively trade places. Swap their
values when you swap the direction.
Does flex-basis override width?
For a row item, flex-basis sets the main-axis size and takes precedence over
width. The default flex-basis: auto means "use my
width, or my content size if width is auto" — so width only drives sizing
while the basis is auto.
How do I truly center a single element with Flexbox?
Put display: flex on the parent with justify-content: center and
align-items: center. For a single child, margin: auto on the
child also centers it on both axes, because auto margins absorb all free space in the flex
container — a handy trick for pushing one item to the far end of a toolbar too.