Flex Containers and Items

Tailwind CSS makes it super easy to work with Flexbox layouts using utility classes. You can turn any container into a flex container using the flex class.

1️⃣ Creating a Flex Container

Use flex to make a container flexible. By default, it lays children in a horizontal row.

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

2️⃣ Making Items Inline with Flex

Use inline-flex instead of flex if you want the container to behave like an inline element.

<div class="inline-flex">
  <div class="bg-purple-500 text-white p-4">A</div>
  <div class="bg-pink-500 text-white p-4">B</div>
</div>

3️⃣ Key Flex Classes in Tailwind

• flex – Turn container into a flexbox
• inline-flex – Same but inline
• flex-row – Items in a row (default)
• flex-col – Items stacked vertically
• flex-wrap – Allow items to wrap onto multiple lines

🧠 Pro Tip

Use gap-x-4 or gap-y-2 to control spacing between flex items instead of using margins.