Tailwind Flexbox lesson
Choose the flex direction
A flex container lays its children out in a row by default. Tailwind’s direction utilities let you choose whether the main axis runs across or down the page.
Utilities
| Class | What it does |
|---|---|
flex-row | Places items from left to right. |
flex-row-reverse | Places items from right to left. |
flex-col | Stacks items from top to bottom. |
flex-col-reverse | Stacks items from bottom to top. |
Try it
Add flex to the parent, then use flex-col when a card, menu, or toolbar needs a vertical stack.
<div class="flex flex-col gap-4">
<header>Title</header>
<main>Content</main>
<footer>Actions</footer>
</div>