Tailwind Flexbox lesson
Distribute wrapped lines
content-* distributes complete flex lines on the cross
axis. It only has visible space to work with when the container wraps
and has extra cross-axis room.
Utilities
| Class | What it does |
|---|---|
content-start |
Packs wrapped lines at the cross-axis start. |
content-center |
Centers the group of wrapped lines. |
content-between |
Places the first and last lines at each edge. |
content-around |
Adds space around every wrapped line. |
content-evenly |
Makes the space between and around lines equal. |
Try it
For a tall, wrapping badge collection, content-center can
keep all rows together in the middle. Add flex-wrap and a
height before judging the result.
<ul class="flex h-64 flex-wrap content-center gap-3">
<li>Tailwind</li>
<li>CSS</li>
<li>Flexbox</li>
<li>Layout</li>
</ul>