Enabling Flexbox with flex
To start using Flexbox in Tailwind, you need to apply the flex class to a container. This turns the element into a flex container and enables all flex properties for its children.
Example:
<div class=“flex”>
<div class=“bg-blue-300 p-4”>Item 1</div>
<div class=“bg-green-300 p-4”>Item 2</div>
</div>
Controlling Direction (flex-row, flex-col)
Flex direction defines how items are arranged — either horizontally (row) or vertically (column). Tailwind provides simple utility classes to control this behavior.
Example:
<div class=“flex flex-col”>
<div class=“bg-red-300 p-4”>Top</div>
<div class=“bg-yellow-300 p-4”>Bottom</div>
</div>
Justifying Content (justify-*)
Use justify-* utilities to control horizontal alignment of flex items. This helps distribute space between or around items inside the container.
Example:
<div class=“flex justify-between”>
<div class=“bg-purple-300 p-4”>Left</div>
<div class=“bg-pink-300 p-4”>Right</div>
</div>
Aligning Items (items-*)
The items-* utilities control vertical alignment of items inside the flex container. This is useful when you want elements centered or aligned to the top/bottom.
Example:
<div class=”flex items-center h-32″>
<div class=”bg-indigo-300 p-4″>Centered</div>
</div>
Controlling Spacing & Growth (gap, flex-grow)
Tailwind provides utilities like gap-* to add space between items and flex-grow to allow elements to expand and fill available space.
Example:
<div class=”flex gap-4″>
<div class=”bg-gray-300 p-4 flex-grow”>Grow</div>
<div class=”bg-gray-500 p-4″>Normal</div>
</div>
