Developer

Flexbox Playground

Visualize and generate CSS/Tailwind flexbox code. Adjust container & item properties with a live preview — then copy CSS or Tailwind classes.

Flexbox Playground

Client-side onlyFast & private

Input

row • wrap • items:stretch • justify:start

Display

Inline

Direction

Wrap

Justify content

Align items

Align content

Gap X (px)

Gap Y (px)

Padding (px)

Items

Uniform settings

Same grow/shrink/basis

Preview size

Preview background

Solid color

Output

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

CSS

/* Container */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 16px;
  padding: 16px;
}

/* Items */
.item {
  flex: 0 1 auto;
}

Tailwind

<div class="flex flex-row flex-wrap justify-start items-stretch content-stretch gap-4 p-4">
  <div class="grow-0 shrink basis-auto">Item</div>
  <div class="grow-0 shrink basis-auto">Item</div>
  <div class="grow-0 shrink basis-auto">Item</div>
</div>

Uses Tailwind utilities and safe arbitrary values (e.g., basis-[160px], gap-x-[10px]) when the spacing isn’t on the default scale.

How to use the Flexbox Playground

Choose a preset or adjust the container: direction, wrap, justify, align items/content, gaps, padding.
Set Items count. Toggle Uniform to apply the same grow/shrink/basis to all, or switch it off to edit each item individually (order, align-self, basis).
Watch the live preview update. Resize the preview for responsive layouts.
Copy CSS or Tailwind classes and paste into your project.

Tip: Use flex-wrap with basis widths (e.g., basis-[200px]) to create grid-like, responsive rows.