Display, Flexbox, and alignment
Tailwind maps directly to CSS display and flexbox concepts. flex enables flex layout, items-center controls cross-axis alignment, justify-between distributes items along the main axis, and flex-col changes the direction. flex-1, shrink-0, and grow control how items consume or surrender space.
Remember that justify-* works along the main axis and items-* along the cross axis. When flex-col changes the main axis to vertical, the visual direction of these utilities changes accordingly.
Use flexbox for one-dimensional relationships—navigation bars, button groups, icon-and-text rows, and toolbars.
Flexbox mental model
Responsive toolbar
<div class="flex flex-col gap-3 rounded-xl border bg-white p-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 class="font-semibold">Tasks</h2>
<p class="text-sm text-slate-600">12 tasks in this workspace</p>
</div>
<div class="flex flex-wrap gap-2">
<button class="rounded-lg border px-3 py-2 text-sm">Filter</button>
<button class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white">New task</button>
</div>
</div>đź’ˇ On small screens the toolbar stacks vertically. At
sm and above it becomes a row and vertically centers the content. The action group can wrap so buttons do not force the page wider than the viewport.Knowledge Check
In a `flex-row` container, what does `items-center` align?