Tailwind Flexbox lesson
Distribute items with justify
justify-* controls how a flex container distributes its children along the main axis. On a row, that is horizontal; on a column, it is vertical.
Common utilities
| Class | Placement |
|---|---|
justify-start | At the beginning of the main axis. |
justify-center | In the center. |
justify-end | At the end of the main axis. |
justify-between | At both ends, with equal space between items. |
justify-around | With space around every item. |
justify-evenly | With equal space everywhere. |
Try it
A navigation bar is a familiar use: send its two groups to opposite sides.
<nav class="flex justify-between">
<a href="/">Home</a>
<div>Account</div>
</nav>