All tools

CSS Flexbox Generator

Visual builder for flexbox layouts.

1
2
3
4
CSS
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

About

Toggle direction, justify-content, align-items, wrap, and gap. See the layout update live. Copy the CSS when it looks right. Faster than memorizing what each property does.

How to use

  1. Toggle properties on the controls.
  2. Watch the preview.
  3. Copy the CSS.

FAQ

Why does flex-direction column rotate the alignment axes?+

Because justify-content and align-items work along the main axis and cross axis. Switching direction switches which is which. This is the most common flexbox confusion.

What does flex: 1 mean?+

Shorthand for flex: 1 1 0. Item grows to fill space, shrinks if needed, base size 0. Most flex-1 usage actually wants flex: 1 1 auto, but that's a longer story.