Part 15: Introduction to Flexbox in Tailwind: Containers & Directions

Flexbox is the workhorse of 1-dimensional web layout. Tailwind's flex utilities make alignment intuitive and concise.

1. Initializing a Flex Container

Adding the flex class transforms an element into a flex container:

<div class="flex">
  <div class="p-4 bg-red-100">Item 1</div>
  <div class="p-4 bg-blue-100">Item 2</div>
  <div class="p-4 bg-green-100">Item 3</div>
</div>

2. Flex Direction Utilities

• flex-row (default): Lays out items horizontally from left to right.
• flex-col: Stacks items vertically.
• flex-row-reverse: Horizontal from right to left.
• flex-col-reverse: Vertical from bottom to top.

Responsive Direction Switching:

A common pattern is stacking items vertically on mobile and switching to a horizontal row on tablets/desktops:

<div class="flex flex-col md:flex-row gap-6">
  <div class="w-full md:w-1/2 bg-slate-100 p-6 rounded-lg">Column A</div>
  <div class="w-full md:w-1/2 bg-slate-100 p-6 rounded-lg">Column B</div>
</div>

Key Takeaways

• Add flex to establish a flexbox layout.
• Use flex-col md:flex-row for responsive mobile-to-desktop transitions.

In Part 16, we will master Justify-Content, Align-Items & Align-Self!