Tailwind Flexbox lesson
Align one flex item
self-* lets one child override the container’s
items-* alignment on the cross axis. It is useful when one
item needs an intentional exception.
Utilities
| Class | What it does |
|---|---|
self-auto |
Uses the container’s align-items value. |
self-start |
Moves this item to the cross-axis start. |
self-center |
Centers this item on the cross axis. |
self-end |
Moves this item to the cross-axis end. |
self-stretch |
Stretches this item when its size allows it. |
Try it
A message row can keep its avatar at the top while the action button is
centered. Apply self-start only to the avatar instead of
changing every child.
<div class="flex items-center gap-3">
<img class="self-start" src="avatar.png" alt="Ava">
<p>A message with more than one line.</p>
<button>Reply</button>
</div>