Developer Tools

Flexbox Generator

Flexbox arranges items along a single axis and distributes the space around them. The part that trips everyone is that justify-content and align-items swap meaning when the direction changes to column — because they work on the main and cross axes rather than horizontal and vertical. Watching that happen live is considerably clearer than reading it.

Runs entirely in your browser — nothing you paste is uploaded.

Main axis is horizontal because the direction is row. So justify-content controls left-to-right placement, and align-items controls top-to-bottom. Switch to a column and they swap.

flex-direction

justify-content — along the horizontal axis

align-items — across the vertical axis

The default — items fill the cross axis.

flex-wrap

The default — items shrink rather than wrapping.

gap12px

Items4

Preview

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

How to

How to use the Flexbox Generator

1
Choose a direction
Row or column. This decides which axis is the main one, and therefore which property controls horizontal alignment — the single most confusing thing about flexbox.
2
Distribute along the main axis
justify-content spreads items along the main axis. Try space-between and space-around to see how the leftover space is divided.
3
Align across the cross axis
align-items positions items on the perpendicular axis. Stretch is the default, which is why items are often taller than expected.
4
Tune individual items
Set grow, shrink and basis on any item to control how it takes or gives up space, then copy the generated CSS.

Examples

Flexbox Generator examples

Centring in both directions

Input: justify-content: center, align-items: center
Output: Item centred horizontally and vertically

The three lines that solved a problem CSS made awkward for fifteen years. In a row, justify handles horizontal and align handles vertical.

The same properties in a column

Input: flex-direction: column, justify-content: center
Output: Item centred vertically instead

Changing direction swaps which axis is which, so justify-content now controls vertical position. This is the source of most flexbox confusion.

A fluid item beside a fixed one

Input: flex: 1 on one item
Output: flex: 1 1 0%

The item takes all the free space while its neighbour keeps its natural width — the standard pattern for a sidebar or a form field beside a button.

Why use it

What the Flexbox Generator gives you

Makes the axes visible

The main and cross axes are labelled and relabel themselves when the direction changes, which is the piece that makes flexbox finally click.

Per-item control

Grow, shrink and basis can be set on individual items, so you can see why one is refusing to shrink.

Standard CSS out

The generated code is plain flexbox with no framework or prefixes to strip.

Runs in your browser

The preview is real flexbox rendered by your own browser, so what you see is exactly what your page will do.

Good to know

Flexbox Generator limitations

Flexbox works in one dimension. A layout needing rows and columns aligned together wants Grid instead.
The preview uses a fixed container size, so behaviour at other widths still needs checking in a real page.
Older prefixed syntax is not generated, since no currently supported browser needs it.
Item content here is placeholder, and real content with long words can change how items size themselves.

Summary

Flexbox Generator in short

justify-content works on the main axis, align-items on the cross axis.
Changing direction to column swaps which axis each one controls.
align-items defaults to stretch, which is why items are often full height.
flex: 1 is shorthand for grow 1, shrink 1, basis 0%.
Everything runs in your browser.

FAQ

Flexbox Generator questions

What is the difference between justify-content and align-items?

justify-content distributes items along the main axis; align-items positions them on the cross axis. In a row the main axis is horizontal, so justify controls left-to-right. Switch to a column and they swap, which catches nearly everyone.

How do I centre something both ways?

Set display: flex, then justify-content: center and align-items: center on the container. Those three lines replaced years of table hacks, absolute positioning and negative margins.

What does flex: 1 actually mean?

It is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. The zero basis is the important part — it makes items share space equally regardless of their content, whereas flex-grow: 1 alone starts from each item's natural size.

Why will my flex item not shrink?

Usually its content has a minimum size. A flex item's min-width defaults to auto, so it will not shrink below its content — a long unbroken word or a wide image. Setting min-width: 0 releases it.

Why are my items all the same height?

align-items defaults to stretch, so every item fills the cross axis. Set it to flex-start, center or baseline if you want items to keep their natural height.

Can I use gap with flexbox?

Yes, and it is now well supported. It is much cleaner than margins on children, which always required an awkward exception for the first or last item.

Why do my items overflow instead of wrapping?

flex-wrap defaults to nowrap, so items shrink rather than moving to a new line and eventually overflow. Set flex-wrap: wrap to let them break onto additional lines.

Should I use flexbox or Grid?

Flexbox for one-dimensional arrangements — a toolbar, a row of cards, a form row. Grid when you need rows and columns to align with each other. They combine well: a Grid page layout with flexbox inside individual cells is very common.

Is it safe to reorder items with the order property?

Visually it works, but it does not change the DOM order, so keyboard and screen reader users still get the original sequence. A mismatch between visual and reading order is a genuine accessibility problem — reorder the markup where you can.

Discover

Related developer tools

CSS Grid GeneratorBuild a CSS Grid layout visually and copy the code. Adjust columns, rows, gaps and placement with a live preview.CSS FormatterBeautify or minify CSS in your browser. Keeps url() values and content strings intact instead of mangling them.HTML FormatterBeautify or minify HTML in your browser. Preserves pre and textarea content and the meaningful spaces between inline elements.JavaScript FormatterBeautify or minify JavaScript in your browser. The minifier understands strings and regex, so URLs and template literals survive intact.