Flexbox Generator

Set flex properties from dropdowns and watch the layout update live.

flex-directionflex-wrapjustify-contentalign-itemsalign-content

gap12pxPreview items5CSS

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

Every control maps to one flex container property and updates the preview instantly. justify-content distributes items along the main axis; align-items along the cross axis; and align-content only has a visible effect once items wrap onto multiple lines. The numbered boxes have varied heights so alignment is easy to see.

How to build a flex layout

Pick values from the dropdowns and drag the gap slider. The numbered boxes rearrange instantly so you can see exactly what each property does, and the container CSS below is ready to copy.

Main axis vs cross axis

justify-content aligns items along the main axis (the direction set by flex-direction), while align-items aligns them across it. Flipping flex-direction to column swaps which axis is which — the preview makes the difference obvious.

Questions

Which properties does it cover?

The flex container properties: flex-direction, flex-wrap, justify-content, align-items, align-content, and gap. Each maps to one dropdown or slider, and the preview reflects your choice immediately.

Why doesn't align-content seem to do anything?

align-content only takes effect when items wrap onto more than one line. Set flex-wrap to wrap and add enough items (or shrink the container) and you'll see it distribute the rows along the cross axis.