When should I use flexbox?

Flexbox is ideal for one-dimensional layouts — a row or a column — such as toolbars, nav bars and centering content.

How do I center something with flexbox?

Set display: flex; justify-content: center; align-items: center; on the parent.

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

See exactly how each flexbox property moves items. Change the container settings, add or remove items and copy the resulting container CSS.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

flex-direction

flex-wrap

justify-content

align-items

align-content

Gap12px

Items5

Live preview

Generated CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

01Adjust the controls on the left or pick a preset to start the Flexbox Playground.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.

Your data never leaves your browser. This tool runs 100% locally — no upload, no logging, no analytics on your inputs.