BluebirdBluebird
Home/Flexbox Generator

Flexbox Generator

Visual flex container playground — tweak direction, alignment, gap and per-item flex, then copy production-ready CSS.

  • Runs in your browser
  • No upload on server
  • Free, forever
  1. Paste input
  2. Run
  3. Copy result
How this works
  1. 1
    Pick direction & wrap

    Row or column, wrap or nowrap. See the boxes react instantly.

  2. 2
    Justify & align

    Try each justify-content and align-items value — the labels finally make sense once you see it move.

  3. 3
    Copy the CSS

    Grab the flex rules for the container and the items.

Watch: items flow as flex changes
copy
Container
Items (3)
Live preview
1
2
3
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(1) {
  flex: 0 1 auto;
}
.container > :nth-child(2) {
  flex: 1 1 auto;
}
.container > :nth-child(3) {
  flex: 0 1 auto;
}
How this works
  • Pick a direction, wrap mode, alignment and gap for your flex container.
  • Add up to eight items and set grow, shrink and basis on each one.
  • Copy the full CSS — container plus per-child rules — into your stylesheet.

Rate Flexbox Generator

One tap. Anonymous. Helps others find the good tools.

No account, no email, no tracking — just a 1–5 number.

Be the first to rate