Tailwind Flexbox lesson
Align items across the axis
items-* controls the cross axis: the axis perpendicular to
the direction. In a normal row, it moves items vertically.
Utilities
| Class | What it does |
|---|---|
items-start |
Aligns children at the cross-axis start. |
items-center |
Centers children across the cross axis. |
items-end |
Aligns children at the cross-axis end. |
items-stretch |
Stretches eligible children to fill the cross axis. |
items-baseline |
Aligns text baselines. |
Try it
To center an icon beside a label of any height, use a flex row with
items-center.
<button class="flex items-center gap-2">
<svg aria-hidden="true">...</svg>
Save changes
</button>