CSS Flexbox Generator & Playground

Experiment with flex direction, wrapping, alignment and item sizing, then copy the CSS and HTML. Free, no sign-up, and your files never leave your device.

Free, with no sign-up and no watermark. The file is processed in your browser and never uploaded.

Learn and build flexbox layouts by doing. Change direction, wrapping, alignment and gap on the container, tweak grow, shrink, basis, order and align-self on individual items, and copy clean CSS and HTML.

Step by step

  1. Set up the container: Choose flex-direction, flex-wrap, justify-content and align-items (and align-content when wrapping).
  2. Space things out: Use gap for even spacing and Number of items to match your content.
  3. Tune an item: Click an item in the preview (or use Edit item) and change flex-grow, flex-shrink, flex-basis, align-self or order.
  4. Copy the result: The CSS tab only includes properties that differ from the defaults; the HTML tab has matching markup.

Handy for

Navigation bars

Logo left, links right with space-between.

Centring

Centre anything both ways with justify-content and align-items: center.

Card rows

Wrapping cards with a fixed gap and flex-basis.

Sticky footers

A column layout where the main area grows.

Good to know

  • flex: 1 1 0 makes items share space equally regardless of content.

  • Use gap instead of margins on children — it never doubles up at the edges.

  • order changes visual order only; screen readers and Tab still follow the HTML order.

Questions

Flexbox or Grid?

Flexbox suits one-dimensional rows or columns; use the CSS Grid Generator for two-dimensional layouts.

Which flex-basis values are accepted?

auto, content, 0, or a number with px, %, rem, em, vw or ch. Anything else (including fr, which only works in Grid) falls back to auto.

Is anything uploaded?

No. The generator runs entirely in your browser; nothing you type or upload is sent anywhere.

More Web Design tools

  • CSS Grid Layout Generator — Set columns, rows and gaps, place items across cells and copy clean CSS Grid code with HTML.
  • Border Radius Generator — Shape corners with simple or eight-value elliptical border-radius to make pills, leaves and organic blobs.
  • Neumorphism CSS Generator — Generate soft-UI neumorphic surfaces (flat, concave, convex or pressed) with a built-in contrast check.
  • Font Pairing Tool — Try curated heading and body font pairs, including Hindi-ready ones, and copy self-hosted CSS.
  • Signature Generator — Turn your typed name into a handwritten-style signature, or draw one, and download a transparent PNG or SVG.
  • CSS Box Shadow Generator — Design soft, layered or inset CSS box shadows with live preview and copy-ready CSS or Tailwind classes.

All Web Design tools