What's the difference between the main axis and cross axis?

The main axis follows flex-direction (horizontal for row, vertical for column) and is controlled by justify-content. The cross axis runs perpendicular to it and is controlled by align-items. Switching direction from row to column swaps which property does what visually.

When should I use gap instead of margin?

gap only adds space between items, not around the outer edge of the container, so you avoid extra margin collapsing or trimming logic on the first/last item. It's supported in all modern browsers for flexbox.

What does flex-wrap do?

nowrap (the default) forces all items onto one line, shrinking them if needed. wrap lets items flow onto new lines when they run out of room, and wrap-reverse does the same but stacks new lines in reverse order.

Do I need to set widths on the flex items?

Not necessarily — flex items size based on their content by default, then grow or shrink based on flex-grow/flex-shrink (both default to reasonable values). This generator focuses on the container properties; add flex-grow/flex-basis on individual items for more control.

Is this computed locally?

Yes — the preview and CSS are generated entirely with client-side JavaScript. Nothing is uploaded.

CSS FLEXBOX GENERATOR

Dial in flex-direction, justify-content, align-items, wrap, and gap with a live box preview.

flex-direction

justify-content

align-items

flex-wrap

gap: 12px

Items: 5

CSS

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

How to build a flexbox layout

1
Choose a flex-direction to set whether items flow in a row or column.
2
Pick justify-content to control spacing along the main axis, and align-items for the cross axis.
3
Toggle flex-wrap and adjust gap to fine-tune spacing between items.
4
Drag the item count slider to see how the layout behaves with more or fewer boxes.
5
Copy the generated .container CSS and paste it into your stylesheet.

Questions

What's the difference between the main axis and cross axis?: The main axis follows flex-direction (horizontal for row, vertical for column) and is controlled by justify-content. The cross axis runs perpendicular to it and is controlled by align-items. Switching direction from row to column swaps which property does what visually.
When should I use gap instead of margin?: gap only adds space between items, not around the outer edge of the container, so you avoid extra margin collapsing or trimming logic on the first/last item. It's supported in all modern browsers for flexbox.
What does flex-wrap do?: nowrap (the default) forces all items onto one line, shrinking them if needed. wrap lets items flow onto new lines when they run out of room, and wrap-reverse does the same but stacks new lines in reverse order.
Do I need to set widths on the flex items?: Not necessarily — flex items size based on their content by default, then grow or shrink based on flex-grow/flex-shrink (both default to reasonable values). This generator focuses on the container properties; add flex-grow/flex-basis on individual items for more control.
Is this computed locally?: Yes — the preview and CSS are generated entirely with client-side JavaScript. Nothing is uploaded.