How do I centre something with flexbox?

Set justify-content to center, which moves items along the main axis, and align-items to center, which moves them across the cross axis. With flex-direction: row that is horizontal then vertical; with column it is the other way round, and the axis labels under the preview say which is which as you change it. The centring across the cross axis only shows when the container is taller than its items, which is why the preview box has a height of its own. That height is not a flex property and is not written into the copied rule.

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

justify-content works along the main axis, the one flex-direction sets, and align-items works across the cross axis, the perpendicular one. A row has a horizontal main axis and a vertical cross axis; a column swaps them. The two lines under the preview name both axes and their direction, including the reversal that row-reverse, column-reverse and wrap-reverse cause, so the properties can be matched to what actually moves.

Why is align-content doing nothing?

align-content distributes flex lines inside a container that allows wrapping. It has no effect with flex-wrap: nowrap. A wrapping container can use align-content even when its items fit on one line, provided there is spare cross-axis space. The tool names nowrap as an inert combination. It also points out growth that can reduce the space left for justify-content and items that cannot wrap or shrink.

Why does my row overflow instead of shrinking?

With flex-wrap: nowrap and flex-shrink: 0 on every item, items overflow when their sizes and gaps exceed the available width. The No wrap, items shrink example demonstrates shrinking with flex-basis: 160px and flex-shrink: 1. Allow wrapping to move items onto new lines. In your own page, content minimum sizes and other CSS can still prevent shrinking; the exported flex properties do not set min-width.

What do flex-grow, flex-shrink and flex-basis mean?

flex-basis sets an item’s starting size along the main axis. flex-grow shares positive free space; factors whose sum on a line is below 1 can leave some space unused. flex-shrink shares a shortfall in proportion to both its factor and the item’s base size. Each item has separate fields for those three properties and align-self. The output uses longhand declarations so the chosen basis is explicit.

What is the difference between the short rule and every property?

Short writes display: flex plus only the properties whose value differs from the CSS default, so an untouched align-content or a default flex-direction is left out; an item left entirely at its defaults gets no rule at all, only a class. Every property writes all of them. The two lay out identically, because the declarations the short form omits are exactly the values the browser already applies, and the preview is drawn from whichever list is on screen.

Does the copied CSS include the preview's own styling?

No. Only flex container and flex item properties are ever written: display, flex-direction, flex-wrap, justify-content, align-items, align-content, gap, and per item flex-grow, flex-shrink, flex-basis and align-self. The width you set on the preview box, its height, its dashed edge, and the tint, padding and number on each item exist so the layout is visible on a dark background, and none of them reach the rule.

What values will it accept, and how many items?

Gaps and the preview width take 0 or a number with px, rem, em or %. flex-basis takes those plus auto and content. flex-grow and flex-shrink take a number from 0 up to 1000. Anything else is refused by name and position, so Item 2 has a flex-basis of "160" tells you which field to fix instead of writing a rule that silently does nothing. Up to 12 items, which is where the preview stops being readable.

Is anything uploaded?

The generator builds the layout in your browser without uploading your settings. No account is needed. It tries to remember the container settings, per-item settings and preview width in this browser’s local storage. If storage is blocked, the generator still works but settings may not persist. Start over clears remembered tool settings.

Can I generate a responsive flexbox layout?

Yes, for layouts that adapt by wrapping and flexing. Load Wrapping cards to start with six items, flex-wrap: wrap, 12px gaps and flex-basis: 160px with grow and shrink set to 1. Change Preview width to see the layout at narrower widths. That width is a preview setting and is not copied into the CSS. The generator does not create breakpoint media queries or change direction automatically at a breakpoint.

Can flexbox make a grid of cards?

Wrapping cards creates a grid-like arrangement with flexbox. Each row distributes its own free space, so a partly filled final row can have wider cards and columns need not align across rows. This output uses display: flex. For shared row and column tracks, use CSS Grid instead.

Can I copy an HTML template as well as the CSS?

Yes. Copy HTML gives one flex container and numbered child elements with the same class names used by Copy CSS. The examples load working starting layouts for cards, a stack, a shrinking row or a sidebar. The HTML is a single container with direct children; it does not generate nested containers or semantic tables.

Does this generate Tailwind, Bootstrap or React Native code?

It generates plain web CSS and HTML. It does not output Tailwind or Bootstrap utility classes, or React Native style objects. Those integrations require their own code and are not delivered by copying this stylesheet.

Can I arrange items by dragging them?

The generator uses labelled controls and Add item or Remove buttons. It has no drag-and-drop editor or control for reordering items.

Flexbox Generator

Build a CSS flexbox layout online, preview its flex properties, and copy the CSS and matching HTML. Set direction, wrapping, alignment and gaps, then adjust each item’s grow, shrink, basis and align-self. Load Wrapping cards for a flexible card layout, Column, centred for a vertical stack, or One item grows for a sidebar beside a flexible main column. The CSS uses the same flex declarations as the preview. Preview dimensions, colours and item padding are separate demonstration styles and are not exported. Short omits default properties; Every property writes the full set of supported flex properties. Axis labels describe the preview’s horizontal, left-to-right writing mode.

preview5 items

main axis horizontal, left to rightcross axis vertical, top to bottom

cssonly what differs from the default

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

Direction

Wrap

Justify

Align

A flex container holding 5 items along a horizontal main axis running left to right, wrapping onto new lines. justify-content: space-between spaces them along that axis, align-items: center places them across the vertical cross axis running top to bottom, and there is a gap of 8px. The CSS beside it is the declaration list this preview is drawn from.

Align content

Row gap

Column gap

Preview width, not in the CSS

Item 1

Item 2

Item 3

Item 4

Item 5

5 of 12 items. Every item keeps its own grow, shrink, basis and align-self.

Wrapping cardsFlexible cards wrap as the container narrows; each row shares its own free space
6 items, horizontal main axis, justify flex-start, align stretch
Row, space-betweenEven gaps with the first and last item flush to the ends
5 items, horizontal main axis, justify space-between, align center
Column, centredStacked down the box and centred across it
5 items, vertical main axis, justify center, align center
No wrap, items shrinkA narrow box where flex-shrink does the work instead of wrapping
4 items, horizontal main axis, justify flex-start, align stretch
One item growsA sidebar at a fixed basis beside a main column that takes the rest
2 items, horizontal main axis, justify flex-start, align stretch

Short writes only the properties that differ from the CSS default; Every property writes all of them. The two lay out identically, because what Short leaves out is the value the browser already uses. The class names in the CSS are the ones in the HTML, so the two paste together. Up to 12 items, and the settings stay in this browser alone: Start over, above the tool, forgets them.

Accuracy. The CSS shown is exactly what the preview applies, so what you copy is what you saw. It covers the flex container and item properties only. The box around the preview has the width you set, a height and a dashed edge, and each item carries a tint, some padding and its number so you can tell them apart on the dark background. None of those are flex properties and none are written into .flex-container or the rules beside it.

Common questions

How do I centre something with flexbox?: Set justify-content to center, which moves items along the main axis, and align-items to center, which moves them across the cross axis. With flex-direction: row that is horizontal then vertical; with column it is the other way round, and the axis labels under the preview say which is which as you change it. The centring across the cross axis only shows when the container is taller than its items, which is why the preview box has a height of its own. That height is not a flex property and is not written into the copied rule.
What is the difference between justify-content and align-items?: justify-content works along the main axis, the one flex-direction sets, and align-items works across the cross axis, the perpendicular one. A row has a horizontal main axis and a vertical cross axis; a column swaps them. The two lines under the preview name both axes and their direction, including the reversal that row-reverse, column-reverse and wrap-reverse cause, so the properties can be matched to what actually moves.
Why is align-content doing nothing?: align-content distributes flex lines inside a container that allows wrapping. It has no effect with flex-wrap: nowrap. A wrapping container can use align-content even when its items fit on one line, provided there is spare cross-axis space. The tool names nowrap as an inert combination. It also points out growth that can reduce the space left for justify-content and items that cannot wrap or shrink.
Why does my row overflow instead of shrinking?: With flex-wrap: nowrap and flex-shrink: 0 on every item, items overflow when their sizes and gaps exceed the available width. The No wrap, items shrink example demonstrates shrinking with flex-basis: 160px and flex-shrink: 1. Allow wrapping to move items onto new lines. In your own page, content minimum sizes and other CSS can still prevent shrinking; the exported flex properties do not set min-width.
What do flex-grow, flex-shrink and flex-basis mean?: flex-basis sets an item’s starting size along the main axis. flex-grow shares positive free space; factors whose sum on a line is below 1 can leave some space unused. flex-shrink shares a shortfall in proportion to both its factor and the item’s base size. Each item has separate fields for those three properties and align-self. The output uses longhand declarations so the chosen basis is explicit.
What is the difference between the short rule and every property?: Short writes display: flex plus only the properties whose value differs from the CSS default, so an untouched align-content or a default flex-direction is left out; an item left entirely at its defaults gets no rule at all, only a class. Every property writes all of them. The two lay out identically, because the declarations the short form omits are exactly the values the browser already applies, and the preview is drawn from whichever list is on screen.
Does the copied CSS include the preview's own styling?: No. Only flex container and flex item properties are ever written: display, flex-direction, flex-wrap, justify-content, align-items, align-content, gap, and per item flex-grow, flex-shrink, flex-basis and align-self. The width you set on the preview box, its height, its dashed edge, and the tint, padding and number on each item exist so the layout is visible on a dark background, and none of them reach the rule.
What values will it accept, and how many items?: Gaps and the preview width take 0 or a number with px, rem, em or %. flex-basis takes those plus auto and content. flex-grow and flex-shrink take a number from 0 up to 1000. Anything else is refused by name and position, so Item 2 has a flex-basis of "160" tells you which field to fix instead of writing a rule that silently does nothing. Up to 12 items, which is where the preview stops being readable.
Is anything uploaded?: The generator builds the layout in your browser without uploading your settings. No account is needed. It tries to remember the container settings, per-item settings and preview width in this browser’s local storage. If storage is blocked, the generator still works but settings may not persist. Start over clears remembered tool settings.
Can I generate a responsive flexbox layout?: Yes, for layouts that adapt by wrapping and flexing. Load Wrapping cards to start with six items, flex-wrap: wrap, 12px gaps and flex-basis: 160px with grow and shrink set to 1. Change Preview width to see the layout at narrower widths. That width is a preview setting and is not copied into the CSS. The generator does not create breakpoint media queries or change direction automatically at a breakpoint.
Can flexbox make a grid of cards?: Wrapping cards creates a grid-like arrangement with flexbox. Each row distributes its own free space, so a partly filled final row can have wider cards and columns need not align across rows. This output uses display: flex. For shared row and column tracks, use CSS Grid instead.
Can I copy an HTML template as well as the CSS?: Yes. Copy HTML gives one flex container and numbered child elements with the same class names used by Copy CSS. The examples load working starting layouts for cards, a stack, a shrinking row or a sidebar. The HTML is a single container with direct children; it does not generate nested containers or semantic tables.
Does this generate Tailwind, Bootstrap or React Native code?: It generates plain web CSS and HTML. It does not output Tailwind or Bootstrap utility classes, or React Native style objects. Those integrations require their own code and are not delivered by copying this stylesheet.
Can I arrange items by dragging them?: The generator uses labelled controls and Add item or Remove buttons. It has no drag-and-drop editor or control for reordering items.

The exported flex declarations are the ones used by the preview. Preview dimensions, colours and padding are not exported; your content and other CSS affect the final layout.