</>

WebDevTools

Flexbox & Grid Playground

Visual CSS layout lab

Tweak Flexbox or Grid properties and copy the CSS for your project.

1
2
3
4
5
6
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  min-height: 200px;
  min-width: 320px;
  width: 100%;
  padding: 16px;
}

Guide: experiment with Flexbox visually

`display: flex` powers toolbars, cards, and centers, but `justify-content`, `align-items`, `flex-wrap`, and `gap` interact oddly — especially with child `min-width`.

Sliders tweak the sample container and items in-browser without repetitive manual CSS. Nothing is saved server-side — great for learning or prepping snippets before React/Vue components.

Use when mobile layouts break, teaching flex to juniors, or testing `order` and `flex-grow` before updating the design system.

Step by step

  1. Configure the flex container — Set `row`/`column` direction, wrap, and gap. Watch how the main axis shifts.
  2. Tune alignment — Play with `justify-content` and `align-items` — `space-between` vs `center` redistributes free space.
  3. Change child items — Adjust `flex-grow`, `flex-shrink`, and `basis` on one item to see neighbors move.
  4. Copy generated CSS — Move into your component and swap sample divs for real markup.

Frequently asked questions