Justify and Align
Position flex items with justify-content and items-* utilities.
Syntax
class="flex justify-between items-center"On a flex container, justify-* controls the main axis and items-* controls the cross axis.
justify-start,justify-center,justify-between,justify-around.items-start,items-center,items-stretch.
justify-between is the classic pattern for navbars.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer centers a spinner and its label both horizontally and vertically in a loading overlay using justify-center and items-center.
- A toolbar places its primary actions on the left and a settings icon on the right using justify-between.
- A tag cloud aligns items to the start of the cross axis using items-start so tags of different heights don't stretch.
More examples
Centering with justify and items
justify-center aligns children along the main axis (horizontal) and items-center aligns them on the cross axis (vertical).
<div class="flex items-center justify-center h-40 bg-gray-100 rounded">
<span class="text-gray-500">Perfectly centered</span>
</div>Space-between toolbar
justify-between pushes the left group of actions and the right settings button to opposite ends of the toolbar.
<div class="flex items-center justify-between px-4 py-2 bg-white border-b">
<div class="flex gap-2">
<button class="p-2 hover:bg-gray-100 rounded">Bold</button>
<button class="p-2 hover:bg-gray-100 rounded">Italic</button>
</div>
<button class="p-2 hover:bg-gray-100 rounded">Settings</button>
</div>Align items to start vs stretch
items-start aligns children to the top of the flex row; items-stretch (default) makes all children grow to the tallest sibling's height.
<div class="flex gap-4 items-start mb-4">
<div class="bg-blue-100 p-4">Short</div>
<div class="bg-blue-200 p-4">Taller item\nwith two lines</div>
</div>
<div class="flex gap-4 items-stretch">
<div class="bg-green-100 p-4">Short</div>
<div class="bg-green-200 p-4">Taller item\nwith two lines</div>
</div>
Discussion