Flexbox Playground

Visually build flexbox layouts — get CSS & Tailwind classes instantly

Container

flex-direction

flex-wrap

justify-content

align-items

align-content

gap 12px

Items (3/8)

Click an item in the preview to select and customize it

Live Preview

Item 1

Item 2

Item 3

direction

row

wrap

nowrap

justify-content

flex-start

align-items

stretch

Generated CSS

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

/* Items with custom settings */

Tailwind Classes

Container

flexflex-rowflex-nowrapjustify-startitems-stretchgap-[12px]

Click an item in the preview to see its Tailwind overrides