Skip to content
ToolBoxGeniehome

CSS Flexbox Generator

Developer Tools · Added

Change a flex property and watch the boxes move. The CSS beneath the preview updates as you go and contains only what you actually changed — a flex rule you can paste into a stylesheet, rather than a dump of six declarations most of which restate the defaults. Individual items can be given their own grow, shrink, basis, order and align-self.

Which way the main axis runs.

Whether items may fall onto a second line.

Spacing along the main axis.

Position across the cross axis.

Needs flex-wrap: wrap to do anything.

How many boxes are in the preview.

Vertical space between items or lines.

Horizontal space between items.

Individual item

Editing item 1. A dot marks an item that differs from the default.

Share of leftover space it takes.

How readily it gives space back.

Starting size: auto, 0, 200px, 50%…

Overrides align-items for this one item.

Lower numbers come first.

Preview

1
2
3
4

The main axis runs horizontally, so justify-content (flex-start) spaces the items horizontally and align-items (stretch) positions them vertically. With flex-wrap: nowrap there is only ever one line, so align-content has nothing to distribute and is left out of the CSS.

CSS

.container {
  display: flex;
  gap: 12px;
}

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Only the properties you have changed appear in the CSS. A generator that emits all six every time produces a rule that is mostly defaults — flex-direction: row and align-items: stretch are what a flex container already does — and burying the two lines that matter under four that do not is how generated CSS becomes unmaintainable.

How to use the css flexbox generator

  1. 1Set the container properties: direction and wrap first, since they decide which axis everything else works along.
  2. 2Adjust justify-content and align-items, watching the preview to see which one moves things the way you meant.
  3. 3Use the item count slider to add boxes, and the gap sliders to space them.
  4. 4To customise one box, select its number under "Individual item" and set its grow, shrink, basis, align-self or order. A dot marks any item that differs from the default.
  5. 5Copy the CSS, and the matching HTML beside it if you need the markup the selectors assume.

Examples

A navigation bar with the last item pushed right

Input
direction row, justify-content flex-start, item 4 given flex-grow 0 and the item before it grow 1
Result
display: flex; plus flex: 1 1 auto; on the growing item

A growing item absorbs all the free space, which is what pushes everything after it to the end. margin-left: auto on the last item achieves the same thing; the difference is where the intent is visible in the CSS.

A centred card, both axes

Input
justify-content center, align-items center, one item
Result
display: flex; justify-content: center; align-items: center;

Three lines, which is the whole of the classic centring problem once flexbox is available.

A wrapping gallery

Input
flex-wrap wrap, align-content space-between, gap 16px, eight items
Result
display: flex; flex-wrap: wrap; align-content: space-between; gap: 16px;

align-content appears in the output only once wrapping is on — on a single-line container it does nothing at all.

About the css flexbox generator

The mental model that makes flexbox click

Flexbox has two axes and every property belongs to one of them. The main axis is set by flex-direction, and justify-content works along it. The cross axis is the other one, and align-items works across it. Once that is internalised, the property names stop being arbitrary: 'justify' is main-axis, 'align' is cross-axis, and the -content suffix means it distributes lines rather than items.

The corollary catches everyone at least once. Changing flex-direction from row to column swaps what those properties do without changing their names, so a layout that centred correctly horizontally suddenly centres vertically instead. Nothing has broken — the axes have rotated underneath the rules.

This is why the preview here labels the axes in plain words as you change direction, rather than only showing the result. The result tells you what happened; the label tells you why.

Generated CSS that survives code review

Most layout generators output every property they expose. It looks thorough and it is actively unhelpful: a rule containing eight declarations of which six are defaults gives the next reader nothing to work with, because the two that matter are indistinguishable from the six that do not.

The rule adopted here is that generated code should read like code somebody wrote deliberately. Only changed properties are emitted, the flex shorthand is used where it applies because that is what people write by hand, and per-item rules appear only for items that actually differ.

One consequence worth knowing about: the item selectors use :nth-child, which depends on the markup order rather than on any class. That is fine for a demo and fragile in a real component, where a class per variant is usually better. The HTML panel exists so the selectors are not mysterious, and adapting them to your own class names takes a moment.

Frequently asked questions

Why does justify-content sometimes appear to do nothing?
It distributes free space, so when there is none it has nothing to distribute. The usual cause is an item with flex-grow above zero, which absorbs all the leftover room before justify-content can space anything with it. Set that item back to grow: 0 and the alignment reappears. The note under the preview here says so when it detects that combination.
What is the difference between justify-content and align-items?
justify-content works along the main axis, align-items across the cross axis, and which is which depends entirely on flex-direction. In a row the main axis is horizontal, so justify-content spaces items left to right; switch to column and the same property starts spacing them top to bottom while align-items takes over the horizontal. This is the single most common source of confusion with flexbox, which is why the preview here names both axes as you change direction.
Why does the generated CSS leave out properties I can see in the controls?
Because emitting them would be noise. flex-direction: row and align-items: stretch are what a flex container already does, so writing them into a stylesheet tells a future reader nothing and hides the two or three lines that carry the actual intent. Only declarations that differ from the CSS initial value are written out. align-content is additionally withheld on a nowrap container, since it has no effect there.
What do the three numbers in the flex shorthand mean?
flex: grow shrink basis. Grow is the share of leftover space the item takes; shrink is how readily it gives space back when there is not enough; basis is the size it starts from before either applies. flex: 1 1 auto is a common 'share the space' setting, and flex: 0 0 200px pins an item at a fixed width that neither grows nor shrinks.
Should I use flexbox or grid?
Flexbox lays out along one axis and lets content size itself; grid lays out along two and lets you define the tracks in advance. A toolbar, a row of cards that wraps, or centring one thing inside another are flexbox problems. A page layout with defined columns and rows, or anything where items must align across both directions, is a grid problem. They coexist happily — a grid cell is frequently a flex container.

Related tools