Layout
Flexbox
Flexbox is the go-to tool for one-dimensional layouts (a row or a column). In Tailwind you enable it with flex, then control direction, alignment and spacing with utilities.
Direction, alignment, spacing
- flex turns on flexbox (a row by default); flex-col makes it a column.
- justify-* aligns items along the main axis: justify-start, justify-center, justify-between, justify-around.
- items-* aligns items along the cross axis: items-start, items-center, items-end, items-stretch.
- gap-* sets consistent spacing between items.
Example
<div class="flex items-center justify-between bg-white p-4 rounded-lg shadow">
<span class="font-bold text-lg">Logo</span>
<div class="flex items-center gap-4 text-gray-600">
<a href="#">Home</a>
<a href="#">Jobs</a>
<a href="#">Login</a>
</div>
</div>Perfect centering
flex + items-center + justify-center centers a child both vertically and horizontally.
Example
<div class="flex items-center justify-center h-40 bg-slate-100 rounded-lg">
<span class="bg-sky-600 text-white px-4 py-2 rounded-lg">Centered</span>
</div>💡
Use flex-1 on a child to make it grow and fill remaining space, and flex-wrap to let items wrap onto new lines.