Flexbox Generator
Tune flex containers and per-item grow, shrink, basis, order, and align-self with a live preview and CSS or Tailwind export. All local.
This tool runs entirely in your browser. Your input is never uploaded.
display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 12px;flex flex-row flex-nowrap justify-start items-stretch gap-[12px]Flex items (5)
Live flex playground
Adjust flex-direction (including reverse directions), flex-wrap, justify-content, align-items, and align-content with instant feedback. Row and column gaps are set independently, and demo children can be added or removed one at a time or by count.
Per-item properties
Each demo child has its own flex-grow, flex-shrink, flex-basis (auto or px), order, and align-self. Only non-default values are serialized, so the output stays clean. The Navbar preset demonstrates the classic trio: a fixed-width logo, a growing menu, and a static action area.
Export
- CSS: a complete
display: flex; ...container declaration, followed by one.flex-item:nth-child(n) { ... }rule per customized child. - Tailwind: one arbitrary-value class string; item properties use
[&>*:nth-child(n)]arbitrary variants such as[&>*:nth-child(2)]:[flex:2_1_auto].
Your settings are saved in this browser; layouts saved by an older version migrate automatically. All processing happens locally.
Related tools
CSS Grid Generator
Design CSS grid layouts visually: columns, rows, gaps, and alignment with live preview and CSS or Tailwind export.
Open ToolCSS Animation Generator
Design fade, slide, scale, rotate, bounce and shake animations and export CSS keyframes with an editable easing curve.
Open ToolBorder Radius Generator
Preview and fine-tune CSS border-radius for one or four corners, then copy CSS or Tailwind classes.
Open Tool