EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Tailwind CSS Flexbox Layout: Flexible Containers and Alignment Control

Flex Container and Direction

Flexbox is a one-dimensional layout model. You create a flex container with display: flex and use direction classes to control how child elements are arranged.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Container and Direction Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-row horizontal layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row (default)</h3>
      <div class="flex flex-row gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">Item 1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">Item 2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">Item 3</div>
      </div>
    </div>

    <!-- flex-col vertical layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-col</h3>
      <div class="flex flex-col gap-4 bg-gray-100 p-4 rounded w-48">
        <div class="bg-green-500 text-white px-4 py-2 rounded text-center">Item 1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded text-center">Item 2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded text-center">Item 3</div>
      </div>
    </div>

    <!-- flex-row-reverse reversed horizontal -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-row-reverse</h3>
      <div class="flex flex-row-reverse gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">Item 1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">Item 2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">Item 3</div>
      </div>
    </div>

    <!-- flex-col-reverse reversed vertical -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-col-reverse</h3>
      <div class="flex flex-col-reverse gap-4 bg-gray-100 p-4 rounded w-48">
        <div class="bg-orange-500 text-white px-4 py-2 rounded text-center">Item 1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded text-center">Item 2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded text-center">Item 3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Flex direction class reference:

Class CSS Value Description
flex-row flex-direction: row Horizontal layout (default)
flex-row-reverse flex-direction: row-reverse Reversed horizontal layout
flex-col flex-direction: column Vertical layout
flex-col-reverse flex-direction: column-reverse Reversed vertical layout

Traditional CSS vs Tailwind The traditional approach requires setting display: flex and flex-direction properties in CSS, while Tailwind uses class names like flex, flex-row, flex-col directly in the HTML.

Tip: flex-row is the default direction and can be omitted. After creating a container with flex, child elements are arranged horizontally by default.

Flex Wrap

By default, flex items shrink to fit the container. Use flex-wrap to allow items to wrap onto multiple lines.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Wrap Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-nowrap no wrapping -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-nowrap (default)</h3>
      <div class="flex flex-nowrap gap-4 bg-gray-100 p-4 rounded overflow-x-auto">
        <div class="bg-blue-500 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 4</div>
        <div class="bg-blue-900 text-white px-6 py-4 rounded flex-shrink-0 w-48">Item 5</div>
      </div>
    </div>

    <!-- flex-wrap wrapping -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-wrap</h3>
      <div class="flex flex-wrap gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-6 py-4 rounded w-48">Item 1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-48">Item 2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-48">Item 3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-48">Item 4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-48">Item 5</div>
      </div>
    </div>

    <!-- flex-wrap-reverse reversed wrapping -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-wrap-reverse</h3>
      <div class="flex flex-wrap-reverse gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-6 py-4 rounded w-48">Item 1</div>
        <div class="bg-purple-600 text-white px-6 py-4 rounded w-48">Item 2</div>
        <div class="bg-purple-700 text-white px-6 py-4 rounded w-48">Item 3</div>
        <div class="bg-purple-800 text-white px-6 py-4 rounded w-48">Item 4</div>
        <div class="bg-purple-900 text-white px-6 py-4 rounded w-48">Item 5</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting flex-wrap: wrap in CSS, while Tailwind uses the flex-wrap class directly. By default, flex-nowrap prevents wrapping.

Note: When using flex-nowrap, items may overflow the container. It's recommended to pair it with overflow-x-auto or use flex-wrap to allow wrapping.

Main Axis Alignment (justify)

justify-* classes control how flex items are aligned along the main axis.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Axis Alignment Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- justify-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-start</h3>
      <div class="flex justify-start gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-center</h3>
      <div class="flex justify-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-end -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-end</h3>
      <div class="flex justify-end gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-between -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-between</h3>
      <div class="flex justify-between bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-around -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-around</h3>
      <div class="flex justify-around bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>

    <!-- justify-evenly -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">justify-evenly</h3>
      <div class="flex justify-evenly bg-gray-100 p-4 rounded">
        <div class="bg-teal-500 text-white px-4 py-2 rounded">1</div>
        <div class="bg-teal-600 text-white px-4 py-2 rounded">2</div>
        <div class="bg-teal-700 text-white px-4 py-2 rounded">3</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Main axis alignment class reference:

Class CSS Value Description
justify-start justify-content: flex-start Align to start
justify-center justify-content: center Center aligned
justify-end justify-content: flex-end Align to end
justify-between justify-content: space-between Spread apart with equal spacing between items
justify-around justify-content: space-around Equal spacing on both sides of each item
justify-evenly justify-content: space-evenly Equal spacing between all items

Traditional CSS vs Tailwind The traditional approach requires setting justify-content in CSS, while Tailwind uses class names like justify-start, justify-center directly. between, around, and evenly are three spacing distribution modes.

Tip: justify-between is commonly used in navigation bars to push the logo left and the menu right. justify-center is used for centering content.

Cross Axis Alignment (items)

items-* classes control how flex items are aligned along the cross axis.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cross Axis Alignment Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- items-start -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-start</h3>
      <div class="flex items-start gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-blue-500 text-white px-4 py-2 rounded">Short</div>
        <div class="bg-blue-600 text-white px-4 py-6 rounded">Medium</div>
        <div class="bg-blue-700 text-white px-4 py-8 rounded">Tall</div>
      </div>
    </div>

    <!-- items-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-center</h3>
      <div class="flex items-center gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-green-500 text-white px-4 py-2 rounded">Short</div>
        <div class="bg-green-600 text-white px-4 py-6 rounded">Medium</div>
        <div class="bg-green-700 text-white px-4 py-8 rounded">Tall</div>
      </div>
    </div>

    <!-- items-end -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-end</h3>
      <div class="flex items-end gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-purple-500 text-white px-4 py-2 rounded">Short</div>
        <div class="bg-purple-600 text-white px-4 py-6 rounded">Medium</div>
        <div class="bg-purple-700 text-white px-4 py-8 rounded">Tall</div>
      </div>
    </div>

    <!-- items-stretch -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-stretch (default)</h3>
      <div class="flex items-stretch gap-4 bg-gray-100 p-4 rounded h-32">
        <div class="bg-orange-500 text-white px-4 rounded flex items-center justify-center">Short</div>
        <div class="bg-orange-600 text-white px-4 rounded flex items-center justify-center">Medium</div>
        <div class="bg-orange-700 text-white px-4 rounded flex items-center justify-center">Tall</div>
      </div>
    </div>

    <!-- items-baseline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">items-baseline</h3>
      <div class="flex items-baseline gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded text-sm">Small</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded text-2xl">Large</div>
        <div class="bg-red-700 text-white px-4 py-2 rounded text-base">Baseline</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Cross axis alignment class reference:

Class CSS Value Description
items-start align-items: flex-start Align to start
items-center align-items: center Center aligned
items-end align-items: flex-end Align to end
items-stretch align-items: stretch Stretch to fill (default)
items-baseline align-items: baseline Baseline aligned

Traditional CSS vs Tailwind The traditional approach requires setting align-items in CSS, while Tailwind uses class names like items-start, items-center directly. items-baseline is particularly useful for aligning text with different font sizes.

Tip: Combining items-center with justify-center achieves perfect horizontal and vertical centering.

Content Alignment (content)

content-* classes control the distribution of multi-line flex items along the cross axis. They only take effect when flex-wrap is enabled.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Content Alignment Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- content-center -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-center</h3>
      <div class="flex flex-wrap content-center gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-blue-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-blue-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>

    <!-- content-between -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-between</h3>
      <div class="flex flex-wrap content-between gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-green-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-green-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>

    <!-- content-around -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">content-around</h3>
      <div class="flex flex-wrap content-around gap-4 bg-gray-100 p-4 rounded h-48">
        <div class="bg-purple-500 text-white px-4 py-2 rounded w-32 text-center">1</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded w-32 text-center">2</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded w-32 text-center">3</div>
        <div class="bg-purple-800 text-white px-4 py-2 rounded w-32 text-center">4</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting align-content in CSS, while Tailwind uses class names like content-center, content-between directly. This property only works in multi-line flex containers.

Note: content-* classes only have an effect when flex-wrap is enabled and there are multiple rows. For single-line layouts, use items-* to control cross axis alignment.

Self Alignment (self)

self-* classes allow individual flex items to override the container's items-* setting and independently control their own cross axis alignment.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Self Alignment Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- self overriding items -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">self overrides items setting</h3>
      <div class="flex items-start gap-4 bg-gray-100 p-4 rounded h-40">
        <div class="bg-blue-500 text-white px-4 py-2 rounded self-start">self-start</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded self-center">self-center</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded self-end">self-end</div>
        <div class="bg-blue-800 text-white px-4 py-2 rounded self-stretch">self-stretch</div>
      </div>
    </div>

    <!-- Practical application -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Practical application: Navbar alignment</h3>
      <div class="flex items-center gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-600 text-white px-4 py-2 rounded">Logo</div>
        <div class="flex-1 bg-green-500 text-white px-4 py-2 rounded self-start">Menu (top aligned)</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded self-center">Button (centered)</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Self alignment class reference:

Class CSS Value Description
self-auto align-self: auto Inherit container setting
self-start align-self: flex-start Align self to start
self-center align-self: center Center self
self-end align-self: flex-end Align self to end
self-stretch align-self: stretch Stretch self to fill
self-baseline align-self: baseline Align self to baseline

Traditional CSS vs Tailwind The traditional approach requires setting align-self on specific elements in CSS, while Tailwind uses class names like self-start, self-center directly in the HTML.

Flex Grow and Shrink

flex-grow, flex-shrink, and flex-1 control how flex items share remaining space.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Grow and Shrink Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- flex-grow -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-grow</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-4 py-2 rounded flex-grow">flex-grow</div>
        <div class="bg-blue-600 text-white px-4 py-2 rounded">Fixed</div>
        <div class="bg-blue-700 text-white px-4 py-2 rounded">Fixed</div>
      </div>
    </div>

    <!-- flex-1 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-1 (commonly used)</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-green-600 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-green-700 text-white px-4 py-2 rounded flex-1">flex-1</div>
      </div>
    </div>

    <!-- flex-auto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-auto</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-purple-500 text-white px-4 py-2 rounded flex-auto">flex-auto</div>
        <div class="bg-purple-600 text-white px-4 py-2 rounded flex-auto">flex-auto</div>
        <div class="bg-purple-700 text-white px-4 py-2 rounded">Fixed</div>
      </div>
    </div>

    <!-- flex-none -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-none</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-orange-500 text-white px-4 py-2 rounded flex-none">flex-none</div>
        <div class="bg-orange-600 text-white px-4 py-2 rounded flex-1">flex-1</div>
        <div class="bg-orange-700 text-white px-4 py-2 rounded flex-1">flex-1</div>
      </div>
    </div>

    <!-- flex-shrink-0 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">flex-shrink-0 (prevent shrinking)</h3>
      <div class="flex gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-red-500 text-white px-4 py-2 rounded flex-shrink-0 w-64">No shrink</div>
        <div class="bg-red-600 text-white px-4 py-2 rounded flex-1">Can shrink</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Flex sizing class reference:

Class CSS Value Description
flex-grow flex-grow: 1 Allow growing
flex-grow-0 flex-grow: 0 Prevent growing
flex-shrink flex-shrink: 1 Allow shrinking
flex-shrink-0 flex-shrink: 0 Prevent shrinking
flex-1 flex: 1 1 0% Equal share of space (recommended)
flex-auto flex: 1 1 auto Equal share based on content
flex-none flex: none No grow, no shrink
flex-initial flex: 0 1 auto Initial state

Traditional CSS vs Tailwind The traditional approach requires setting flex-grow, flex-shrink, and flex-basis as three separate properties in CSS, while Tailwind's flex-1 wraps the most common configuration into a single class.

Tip: flex-1 is the most commonly used flex class, letting items equally share remaining space. flex-auto takes content width into account, making it suitable when item content varies in length.

Gap Spacing (gap)

gap-* classes control the spacing between flex items, replacing the traditional margin approach.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gap Spacing Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- gap-4 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-4 (16px)</h3>
      <div class="flex flex-wrap gap-4 bg-gray-100 p-4 rounded">
        <div class="bg-blue-500 text-white px-6 py-4 rounded">1</div>
        <div class="bg-blue-600 text-white px-6 py-4 rounded">2</div>
        <div class="bg-blue-700 text-white px-6 py-4 rounded">3</div>
        <div class="bg-blue-800 text-white px-6 py-4 rounded">4</div>
      </div>
    </div>

    <!-- gap-x and gap-y -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">gap-x-8 gap-y-4 (separate horizontal and vertical control)</h3>
      <div class="flex flex-wrap gap-x-8 gap-y-4 bg-gray-100 p-4 rounded">
        <div class="bg-green-500 text-white px-6 py-4 rounded w-32 text-center">1</div>
        <div class="bg-green-600 text-white px-6 py-4 rounded w-32 text-center">2</div>
        <div class="bg-green-700 text-white px-6 py-4 rounded w-32 text-center">3</div>
        <div class="bg-green-800 text-white px-6 py-4 rounded w-32 text-center">4</div>
        <div class="bg-green-900 text-white px-6 py-4 rounded w-32 text-center">5</div>
      </div>
    </div>

    <!-- Different gap sizes -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Different gap sizes</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-2 (8px)</p>
          <div class="flex gap-2 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-6 (24px)</p>
          <div class="flex gap-6 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">gap-10 (40px)</p>
          <div class="flex gap-10 bg-gray-100 p-4 rounded">
            <div class="bg-purple-500 text-white px-4 py-2 rounded">1</div>
            <div class="bg-purple-600 text-white px-4 py-2 rounded">2</div>
            <div class="bg-purple-700 text-white px-4 py-2 rounded">3</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting margin on child elements, but the first and last elements need special handling. Tailwind's gap-* sets spacing on the container directly, automatically handling edge cases.

Tip: gap-* also works with Grid layouts. Use gap-x-* and gap-y-* to control horizontal and vertical spacing independently.

Comprehensive Example

Combining all the concepts above, let's create a complete Flexbox layout.

Example

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Comprehensive Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Navbar -->
    <nav class="bg-white rounded-lg shadow p-4">
      <div class="flex justify-between items-center">
        <div class="text-xl font-bold text-blue-600">Logo</div>
        <div class="hidden md:flex items-center gap-6">
          <a href="#" class="text-gray-600 hover:text-blue-600">Home</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">Products</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">About</a>
          <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a>
        </div>
        <button class="bg-blue-600 text-white px-4 py-2 rounded">Sign In</button>
      </div>
    </nav>

    <!-- Hero Section -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow p-12">
      <div class="flex flex-col md:flex-row items-center gap-8">
        <div class="flex-1">
          <h1 class="text-3xl font-bold text-white mb-4">Welcome to Flexbox</h1>
          <p class="text-blue-100 mb-6">A powerful flexible layout system for easily creating responsive pages</p>
          <div class="flex gap-4">
            <button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold">Get Started</button>
            <button class="border border-white text-white px-6 py-3 rounded-lg">Learn More</button>
          </div>
        </div>
        <div class="flex-shrink-0">
          <div class="w-48 h-48 bg-white/20 rounded-full flex items-center justify-center">
            <span class="text-6xl">🎯</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Feature Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">📐</span>
        </div>
        <h3 class="font-semibold mb-2">Flexible Alignment</h3>
        <p class="text-gray-600 text-sm flex-1">Supports main axis, cross axis, and self alignment modes</p>
      </div>
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">📏</span>
        </div>
        <h3 class="font-semibold mb-2">Flexible Sizing</h3>
        <p class="text-gray-600 text-sm flex-1">Intelligent space distribution via flex-grow and flex-shrink</p>
      </div>
      <div class="bg-white rounded-lg shadow p-6 flex flex-col items-center text-center">
        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
          <span class="text-2xl">🔄</span>
        </div>
        <h3 class="font-semibold mb-2">Responsive Wrapping</h3>
        <p class="text-gray-600 text-sm flex-1">flex-wrap auto-wraps to adapt to different screen sizes</p>
      </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white rounded-lg shadow p-6">
      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
        <div class="text-gray-400">&copy; 2024 Flexbox Example</div>
        <div class="flex gap-4">
          <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
          <a href="#" class="text-gray-400 hover:text-white">Terms of Use</a>
          <a href="#" class="text-gray-400 hover:text-white">Contact Us</a>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>
▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires writing extensive CSS for navbar, hero section, card grid, and other layouts, while Tailwind accomplishes the same with flex utility classes directly in the HTML, reducing code by over 60%.

❓ FAQ

Q What's the difference between flex-1 and flex-auto?
A flex-1 is equivalent to flex: 1 1 0% — items share space starting from 0%, ignoring content width. flex-auto is equivalent to flex: 1 1 auto — items share space based on their content width. For most cases, flex-1 is recommended.
Q How do I control row spacing after flex-wrap?
A Use content-* classes (like content-center, content-between) to control multi-row distribution, and pair with gap-* for item spacing. gap-y-* specifically controls row spacing.
Q How do I achieve horizontal and vertical centering?
A Use flex items-center justify-center. This is the most common centering technique with Flexbox, and it's much simpler than the traditional margin: auto + position approach.
Q What's the difference between gap and margin?
A gap is set on the container and automatically handles edge spacing without margin collapsing. margin is set on child elements and requires handling the first/last element spacing. gap is the recommended approach.

📖 Summary

📝 Exercises

  1. ⭐ Create a horizontally centered navbar using flex justify-between items-center with the logo on the left and menu on the right

  2. ⭐⭐ Create a responsive card list using flex flex-wrap gap-6 for auto-wrapping, with cards using flex-1 to equally share space

  3. ⭐⭐⭐ Create a complete hero section with a title, description, buttons, and an image, using flex for a side-by-side layout that automatically switches to vertical stacking on mobile

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏