Skip to main content
floow.designfloow.design

Flexbox Generator

Build a flex layout visually and copy the CSS, with a live preview that shows what each property does.

Build layouts freeSign up to copy the CSSNo usage limits
1
2
3
4
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 12px;

Adjust flex-direction, justify-content, align-items, wrap and gap, and watch a real set of boxes respond. When the layout is right, take the CSS.

Flexbox is the layout mode nearly every mobile interface is built from — nav bars, list rows, button groups, card headers — and it is far quicker to learn by moving controls than by reading the spec.

What flexbox is for

Flexbox lays out items along a single axis and distributes the space around them. That one-dimensional focus is the whole point: a row of buttons, a list item with an icon on one side and a chevron on the other, a header with a title and an action. Anything genuinely two-dimensional — where things must line up in rows and columns simultaneously — is a job for CSS grid instead.

justify vs. align, once and for all

justify-content moves items along the main axis; align-items moves them across the cross axis. Which is which depends entirely on flex-direction — switch to column and the two swap places. That single dependency is the source of most flexbox confusion, and the fastest cure is toggling direction here and watching the controls trade jobs.

Use gap, not margins

gap spaces children without adding an unwanted edge on the first or last item, which is exactly the bug that margin-based spacing creates. It also survives wrapping cleanly, applying between rows as well as columns. For any list, toolbar or chip group on a phone, gap is almost always the correct answer.

How to use the flexbox generator

  1. Set flex-direction first — it decides which axis justify-content and align-items each control.
  2. Use justify-content to position items along the main axis, and align-items across the other one.
  3. Add a gap rather than margins so the first and last items do not pick up an unwanted outer edge.
  4. Turn on wrap and add items to check the layout holds when content overflows a narrow phone width.
  5. Copy the generated CSS straight into your stylesheet or component.

Use it with

  • CSS Grid Generator — Lay out rows, columns and gaps visually, place items on the grid, and copy the CSS.
  • Border Radius Generator — Shape each corner independently, including nested radii, and copy the CSS.
  • Box Shadow Generator — Dial in offset, blur, spread and colour with a live preview, and stack multiple shadows.

Frequently asked questions

When should I use flexbox instead of CSS grid?
Use flexbox for one-dimensional layouts — a row or a column, like a nav bar, a list row or a button group. Use grid when content must align in both directions at once, such as a photo gallery or a dashboard of tiles.
What is the difference between justify-content and align-items?
justify-content positions items along the main axis, align-items along the cross axis. With flex-direction: row the main axis is horizontal; switch to column and the two swap roles entirely.
Why is gap better than margin for spacing flex items?
gap only applies between items, so you never get an unwanted margin on the outer edge of the first or last one. It also handles wrapped rows correctly, spacing them vertically as well as horizontally.
Is this flexbox generator free?
Yes — unlimited use with no account. Signing up free lets you copy the generated CSS out.

Related tools