consolelog.tools

Flexbox Generator

Build flexbox layouts visually with full container control AND per-item properties — order, grow, shrink, basis, and align-self. Click items to edit them, resize the preview to test wrapping, then export CSS, SCSS, Tailwind classes, HTML, or JSX.

About this ToolHow it works, benefits & use cases

Most flexbox generators only expose container properties; this one treats every child as a real, editable item. Set the container with display, flex-direction, flex-wrap, justify-content, align-items, and (when wrapping is on) align-content, plus linked or independent row and column gaps. Then click any box in the live preview to select it and tune its own order, flex-grow, flex-shrink, flex-basis, and align-self — items that differ from the defaults are marked with a dot so you can see at a glance which ones you’ve customised. Add, clone, or remove items freely, and drag the preview’s width and height sliders to watch wrapping and alignment respond in real time. A set of layout presets (navbars, centred content, card rows, and more) gives you a fast head start. Export to CSS, SCSS, Tailwind utility classes, ready-to-paste HTML, or JSX — and because flex utilities are identical in Tailwind v3 and v4, that output works in both. The whole layout is captured in a shareable URL.

How to Use

  1. 1Set the container properties: display, flex-direction, flex-wrap, justify-content, align-items, and align-content.
  2. 2Adjust the column and row gaps — keep them linked for an even gutter or unlink for separate values.
  3. 3Click an item in the preview (or its chip) to select it, then edit its order, flex-grow, flex-shrink, flex-basis, and align-self.
  4. 4Use Add or Clone to create more items, or remove ones you don’t need.
  5. 5Drag the preview Width and Height sliders to test how the layout wraps and aligns at different sizes.
  6. 6Load a layout preset for a quick start, then pick an output format and copy, download, share, or pipe the code.

Key Benefits

  • Edits both container properties AND per-item order, grow, shrink, basis, and align-self
  • Click any item in the live preview to select and tune it directly
  • Customised items are flagged with a dot so non-default ones stand out
  • Width and height sliders let you test flex-wrap and alignment behaviour live
  • align-content control appears automatically when wrapping is enabled
  • Layout presets for common patterns plus add / clone / remove items
  • Export CSS, SCSS, Tailwind classes, HTML, or JSX, captured in a shareable URL

Common Use Cases

  • Building a responsive navbar with a logo, spaced links, and a right-aligned action
  • Centring content both axes and copying the exact justify/align combination
  • Designing a card row and watching it wrap as the preview width shrinks
  • Experimenting with order and flex-grow to reorder and size items without touching markup
  • Exporting a flex container plus its items as JSX for a React component
Preview

Container

display

flex-direction

flex-wrap

justify-content (main axis)

align-items (cross axis)

align-content (wrapped lines)

Items (3)

Item 1 properties

auto · 0 · 120px · 50%

align-self

Layout presets

Copy, download, share, or pipe to another tool

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

Container + items, not just the container

Most generators only expose container properties. Here every child is a real, selectable item — click one in the preview to tune its order, flex-grow, flex-shrink, flex-basis, and align-self. Drag the width slider to watch flex-wrapbehave, then export to CSS, SCSS, Tailwind classes (v3 & v4 — flex utilities are identical), ready-to-paste HTML, or JSX.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools