0
0
Tailwindmarkup~5 mins

Flex container activation in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Flex container activation lets you arrange items in a row or column easily. It helps create flexible layouts that adjust to screen size.

You want to line up buttons horizontally in a navigation bar.
You need to stack cards vertically with equal spacing.
You want items to wrap to the next line on smaller screens.
You want to center content both horizontally and vertically.
You want a responsive layout that changes direction on different devices.
Syntax
Tailwind
flex

Adding the flex class to a container activates flexbox layout.

By default, flex arranges items in a row (horizontally).

Examples
This creates a horizontal row of three items.
Tailwind
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
Adding flex-col changes the direction to vertical stacking.
Tailwind
<div class="flex flex-col">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>
Using flex-wrap allows items to wrap to the next line if they don't fit.
Tailwind
<div class="flex flex-wrap">
  <div class="w-1/3">Box 1</div>
  <div class="w-1/3">Box 2</div>
  <div class="w-1/3">Box 3</div>
  <div class="w-1/3">Box 4</div>
</div>
Sample Program

This example shows a flex container with three colored boxes arranged in a row with space between them.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flex Container Activation Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <section>
    <h1 class="text-xl font-bold mb-4">Flex Container Activation</h1>
    <div class="flex gap-4 bg-gray-100 p-4 rounded">
      <div class="bg-blue-500 text-white p-3 rounded">Box 1</div>
      <div class="bg-green-500 text-white p-3 rounded">Box 2</div>
      <div class="bg-red-500 text-white p-3 rounded">Box 3</div>
    </div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use gap-* classes to add space between flex items easily.

Flex containers are responsive by default and adjust items based on screen size.

Remember to include Tailwind CSS via CDN or build process to use these classes.

Summary

Adding flex activates flexbox layout on a container.

Flexbox helps arrange items in rows or columns easily and responsively.

Use additional classes like flex-col or flex-wrap to control direction and wrapping.