Skip to content
M2TOOLKIT

Popular tools

Menu

CSS Flexbox Generator

See what every flexbox property does, then copy the code.

  • Free
  • No sign-up
  • Runs in your browser
12px
5

Click an item in the preview to set its own flex values.

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us.

How to use the CSS Flexbox Generator

  1. Set the container properties and number of items.
  2. Click an item to give it its own flex values.
  3. Copy the generated CSS.

What does this tool do?

Flexbox lays items out in one direction — a row or a column — and is ideal for navigation bars, button groups, cards in a row and centring. Experimenting live is the fastest way to learn how justify-content (main axis) and align-items (cross axis) interact.

Why use it?

  • Live preview.
  • Per-item controls.
  • Clean CSS output.

Privacy

Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.

Last reviewed by the M2Toolkit team.

Other tools people use alongside the css flexbox generator.