Flexbox Generator

Overview

See Flexbox instead of guessing at it. Set direction and wrap, line items up with justify-content and align-items, and tune each item's grow, shrink and basis while the canvas shows the real layout. Add breakpoint overrides and the @media queries are written for you. Copy plain CSS or matching Tailwind classes. It all runs in your browser and works offline.

Build navbars and toolbarsSpace out a logo, links and buttons with justify-content and gaps, then paste the code into your header.
Align cards and media objectsBuild media objects, split panels and equal card rows, and watch how they wrap.
Responsive flex layoutsStart with a row and change direction, wrap or alignment per breakpoint so content stacks well on small screens.
Learn Flexbox by seeing itMove a control and watch the CSS change, so you see what each Flexbox rule really does.

Key features

Live canvas showing your real layout
Direction, wrap, justify and align controls
Grow, shrink, basis, align-self and order per item
Row and column gaps, linked or separate
Breakpoint overrides with real @media queries
Preview at phone, tablet, desktop or any width
Copy CSS, HTML or Tailwind classes
Starter layouts: navbar, media object, pricing row
Works offline, in light or dark mode

Set

Developer Tools 07

Neighbours

01 CSS Grid Generator 02 SQLite Database Viewer & Editor 03 Favicon Generator 04 HTML Editor & Live Preview 05 Regex Tester & Live Preview 06 Webfont Converter

Specification

Command: developer.flexbox_generator
Set: Developer
Input: text
Output: —
Max file: no limit
Batch: single file

Runtime

Engine: CodeMirror 6 · native
Threads: single
Isolated: —
WebGPU: —
Memory: —

Transport 0 B

Your file is opened, worked on and saved inside this tab. This tool has no upload step, so your file has nowhere else to go.

Keys

Search: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/

How it works

Set the flow

Pick a direction and whether items wrap, then set how they line up on both axes. The canvas shows the real result as you go.

Tune the items

Set grow, shrink and basis for each item, adjust align-self and order, and choose the gap.

Make it responsive

Pick a breakpoint and change anything for that screen size. The @media queries are written for you.

Copy the code

Choose CSS or Tailwind, check it at any width, and copy it.

Frequently asked

Does everything run in my browser?

Yes. The builder, the preview and the code all run in your browser. Nothing is uploaded and nothing is tracked.

What flex properties can I control?

On the container: flex-direction, flex-wrap, justify-content, align-items, align-content and gap. On each item: flex-grow, flex-shrink, flex-basis, align-self and order.

Does it support responsive layouts?

Yes. Set a base layout, then override any property per breakpoint. The CSS uses min-width media queries, and the Tailwind output uses prefixes like md: and lg:.

Can I get Tailwind classes instead of CSS?

Yes. Switch the output to Tailwind and copy the classes. Both outputs come from the same layout, so they always match.

Can I switch between flexbox and grid?

Yes. You can switch layout mode at any time without losing your work. This page starts in flexbox, and there's a separate CSS Grid generator too.

Keys

Search: ⌘K
Panels: ⌘1 · ⌘2
Full width: F
All keys: ⌘/