← All text tools

CSS flexbox generator

Play with flexbox settings on live boxes and copy the CSS.

  • Free
  • No sign-up
  • Works on any device

About CSS flexbox generator

Change flex-direction, wrap, justify-content, align-items and gap on live boxes and see how items move, then copy the CSS. Justify-content works along the main axis and align-items along the cross axis, and these swap when you switch from row to column, which confuses many beginners.

How to use CSS flexbox generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

How do I center a div with flexbox?

On the parent set display: flex, justify-content: center and align-items: center. Give the parent a height so vertical centring has room to work.

Is CSS flexbox generator free?

Yes. CSS flexbox generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools