Tailwind CSS Flex

The Tailwind CSS flex utility class lets you easily create flexible layouts using the CSS Flexbox model. With Tailwind, you can use shorthand classes for flex property values such as flex-grow, flex-shrink, and flex-nowrap, as well as set individual flex values using flex-[n].

Syntax

<div class="flex [flex-direction] [flex-wrap] [justify-content] [align-items] [align-content]">
  <!-- child elements with flex properties -->
</div>

• flex-direction: sets the flex direction of the container. Values: row, row-reverse, col, col-reverse.
• flex-wrap: sets whether the container should wrap its children. Values: wrap, wrap-reverse, no-wrap.
• justify-content: sets how the container distributes space between its children. Values: start, end, center, between, around, evenly.
• align-items: sets how the container aligns its children vertically. Values: start, end, center, baseline, stretch.
• align-content: sets how the container distributes space between rows when wrapping. Values: start, end, center, between, around, stretch.

Example

<div class="flex flex-row flex-wrap justify-center items-center">
  <div class="bg-gray-300 p-4 m-2">Box 1</div>
  <div class="bg-gray-400 p-4 m-2">Box 2</div>
  <div class="bg-gray-500 p-4 m-2">Box 3</div>
</div>

Output

Explanation

The example code creates a container with three child divs. The flex class sets the display property to flex and enables the Flexbox model. The flex-row class sets the flex direction to row, so the child elements will display in a row. The flex-wrap class enables wrapping and ensures that all child elements will remain on a single line. The justify-center and items-center classes center the child elements horizontally and vertically, respectively.

Use

Use the Tailwind CSS flex utility class whenever you need to create a flexible layout using the Flexbox model. You can use shorthand classes or set individual Flexbox properties as needed to achieve your desired layout.

Important Points

• The flex container must have a fixed height or the child elements must have a height set, otherwise the container will collapse.
• The flex container should have a defined width, or use flex-shrink to prevent the container from growing too large.
• The shorthand classes for Flexbox properties use t instead of top, r instead of right, b instead of bottom, and l instead of left, for brevity.
• The justify-between and justify-around values for the justify-content property do not work with the flex-wrap property. Use justify-evenly instead for equivalent spacing between child elements.

Summary

The Tailwind CSS flex utility class enables flexible layouts using the CSS Flexbox model. You can use shorthand classes or set individual Flexbox properties as needed to create your desired layout. Ensure that the flex container has a fixed height or the child elements have a height set, and that the container has a defined width or uses flex-shrink to prevent it from growing too large.