0
0
Tailwindmarkup~5 mins

Why Flexbox is essential in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Flexbox helps arrange items neatly in a row or column. It makes layouts easy and flexible on any screen size.

To center content horizontally and vertically inside a box.
To create navigation menus that adjust on different devices.
To build card layouts that wrap nicely on small screens.
To space out buttons evenly in a toolbar.
To reorder items visually without changing the HTML order.
Syntax
Tailwind
flex
flex-row
flex-col
justify-center
items-center
flex-wrap

flex makes a container use Flexbox layout.

flex-row arranges items in a row (left to right).

Examples
This centers the text both horizontally and vertically inside a 10rem tall box.
Tailwind
<div class="flex justify-center items-center h-40 bg-gray-100">
  <p>Centered Text</p>
</div>
This stacks buttons vertically with space between them.
Tailwind
<div class="flex flex-col space-y-4">
  <button>Button 1</button>
  <button>Button 2</button>
</div>
This wraps colored boxes to the next line if the screen is too narrow.
Tailwind
<div class="flex flex-wrap gap-2">
  <div class="w-24 h-24 bg-blue-400"></div>
  <div class="w-24 h-24 bg-red-400"></div>
  <div class="w-24 h-24 bg-green-400"></div>
</div>
Sample Program

This page uses Flexbox with Tailwind to create a header with spaced navigation links, a centered box, and a row of colored squares that wrap on smaller screens.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flexbox Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-6">
  <header class="flex justify-between items-center bg-white p-4 shadow">
    <h1 class="text-xl font-bold">My Website</h1>
    <nav class="flex space-x-4">
      <a href="#" class="text-blue-600 hover:underline">Home</a>
      <a href="#" class="text-blue-600 hover:underline">About</a>
      <a href="#" class="text-blue-600 hover:underline">Contact</a>
    </nav>
  </header>

  <main class="flex flex-col items-center mt-10 gap-6">
    <section class="flex justify-center items-center w-64 h-40 bg-blue-100 rounded">
      <p class="text-center">Centered Box</p>
    </section>

    <section class="flex flex-wrap gap-4 max-w-md">
      <div class="w-24 h-24 bg-red-400 rounded"></div>
      <div class="w-24 h-24 bg-green-400 rounded"></div>
      <div class="w-24 h-24 bg-yellow-400 rounded"></div>
      <div class="w-24 h-24 bg-purple-400 rounded"></div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Flexbox works well for one-dimensional layouts (row or column).

Use flex-wrap to allow items to move to the next line on small screens.

Tailwind classes make it easy to apply Flexbox without writing custom CSS.

Summary

Flexbox helps arrange items easily in rows or columns.

It makes layouts responsive and neat on all screen sizes.

Tailwind CSS provides simple classes to use Flexbox quickly.