F flexr.dev

Layout Recipe

Stack Elements Vertically with Tailwind flex-col

'flex flex-col' rotates the main axis so children stack top-to-bottom, and 'gap-4' inserts identical spacing between every child without the margin-collapsing headaches of 'space-y-*' or manual margins. This is the cleanest pattern for form fields, settings lists, and any single-column mobile layout. Remember that in column mode, 'justify-*' now controls vertical distribution and 'items-*' controls horizontal alignment.

The playground below is pre-configured with this exact layout — tweak any control to explore, then copy the Tailwind or vanilla CSS from the exporter.

Live Preview

Current Layout:

Stacking with flex-col and gap

flex flex-col turns a container's main axis vertical, so children stack top to bottom. Add gap-4 and every child gets identical spacing between it and the next — the modern replacement for margins between stacked elements.

Tailwind 
<div class="flex flex-col gap-4">
  <input class="border p-2" />
  <input class="border p-2" />
  <button>Submit</button>
</div>
Vanilla CSS 
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

gap vs space-y

Tailwind offers two ways to space a stack: gap-4 (a real flex or grid gap) and space-y-4 (margins between children). Prefer gap — it never collapses, it works the same in flex and grid, and it leaves no stray margin on the first or last child. Reach for space-y-* only on plain block layouts that are not flex or grid.

Alignment flips in column mode

The axis swap catches people out. In a column, justify-* now controls vertical distribution and items-* controls horizontal alignment. So items-center centers the stack left-to-right, and justify-center centers it top-to-bottom (given the parent has a height).

Common mistakes

Expecting justify-center to center horizontally. In a column the main axis is vertical, so it centers vertically; use items-center for horizontal.

Mixing gap and space-y. Pick one; together they double the spacing.

Forgetting flex. flex-col does nothing until the container is a flex context.

Frequently asked questions

How do I stack divs vertically in Tailwind?
Use flex flex-col on the parent and gap-4 for even spacing between the stacked children.
Should I use gap or space-y for vertical spacing?
Prefer gap. It does not collapse margins, works in both flex and grid, and never leaves a trailing margin. Use space-y only for non-flex block layouts.
Why does justify-center not center my column horizontally?
In flex-col the main axis is vertical, so justify-center centers vertically. Use items-center for horizontal centering in a column.

Popular Layout Guides