Flexbox Layouts

Flexbox is the go-to for one-dimensional layouts. Tailwind makes it incredibly intuitive.

Enabling Flex

<!-- Create a flex container -->
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Direction

<!-- Row (default) - horizontal -->
<div class="flex flex-row">...</div>

<!-- Column - vertical -->
<div class="flex flex-col">...</div>

Justify Content (Main Axis)

Control horizontal alignment in a row:

<div class="flex justify-start">Start (default)</div>
<div class="flex justify-center">Center</div>
<div class="flex justify-end">End</div>
<div class="flex justify-between">Space between</div>

Align Items (Cross Axis)

Control vertical alignment in a row:

<div class="flex items-start h-24">Top</div>
<div class="flex items-center h-24">Center</div>
<div class="flex items-end h-24">Bottom</div>

Gap

Add space between flex items:

<div class="flex gap-4">
  <div>1</div><div>2</div><div>3</div>
</div>

Flex Grow & Shrink

Control how items size:

<!-- flex-1: Grow to fill space equally -->
<div class="flex">
  <div class="flex-1">Grows</div>
  <div class="flex-1">Grows</div>
  <div class="w-32">Fixed</div>
</div>

Practical Examples

Navigation Bar

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex items-center gap-6">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">
    Sign Up
  </button>
</nav>

Card with Footer

<div class="flex flex-col h-64 bg-white rounded-lg shadow">
  <div class="flex-1 p-6">
    <h3 class="text-lg font-semibold">Card Title</h3>
    <p class="mt-2 text-gray-600">Content goes here...</p>
  </div>
  <div class="flex items-center justify-between px-6 py-4 bg-gray-50">
    <span class="text-sm text-gray-500">Updated 2 hours ago</span>
    <button class="text-blue-600 text-sm font-medium">View More</button>
  </div>
</div>

Centering Content

<!-- Center both horizontally and vertically -->
<div class="flex items-center justify-center h-64 bg-gray-100">
  <div class="bg-white p-8 rounded-xl shadow-lg text-center">
    <h1 class="text-2xl font-bold">Welcome Back</h1>
  </div>
</div>

Key Takeaways

• flex: Creates a flex container
• justify-: Aligns on main axis (horizontal in row)
• items-: Aligns on cross axis (vertical in row)
• gap-*: Adds space between items
• flex-1: Makes item grow to fill space
• flex-col: Switches to vertical layout

Next, let's explore CSS Grid layouts!