Flexwind Froggy

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>

Practice in Flexwind Froggy

More flexbox lessons