Flexbox Playground

Build flexbox layouts visually. Control direction, justify, align, wrap, gap and individual item properties.

Presets

Direction

Justify

Align

Wrap

Gap: 16px

3 itemsClick an item to edit its flex properties

Show Tailwindflex-rowjustify-startitems-stretch

CSS

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 16px;

Tailwind CSS

<div class="flex flex-row justify-start items-stretch flex-nowrap gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

Build CSS grid layouts visually. Adjust columns, rows and gaps, then copy the code.

Visualize and adjust complex border-radius values on a live preview.

Generate a responsive typographic scale from a base size and ratio. Export CSS variables, clamp() fluid values and Tailwind config.

Build a consistent spacing scale from a base unit. Generate linear, geometric or Fibonacci scales with CSS variables and Tailwind config.

Combine 2D and 3D CSS transforms visually — translate, rotate, scale, skew and perspective with live preview and transform-origin control.

Generate responsive CSS clamp() values for fluid typography and spacing. Set min/max viewport and values, preview at every breakpoint.