Flexbox Utilities

Tailwind CSS provides utility classes that allow you to create flexible and responsive layouts using Flexbox easily. These utilities enable you to control the design and alignment of elements within a container.

Setting Display to Flex

To set an element to use Flexbox for its layout, you can use the flex class. This class sets the display property to flex.

In this example, the flex class on the parent div makes it a flex container, and the child divs (flex-1) will distribute space equally.

Controlling Flex Direction

Flex direction utilities allow you to control the direction in which the flex items are placed in the container. You can set the direction to row (default), column, row-reverse, or column-reverse using the following classes:

In this example, the flex-col class sets the flex direction to column, stacking items vertically.

Aligning Items Horizontally

The justify-content utilities control the horizontal alignment of items within a flex container. The available classes are:

In this example, the justify-center class centers the items horizontally within the flex container.

Aligning Items Vertically

The align-items utilities control the vertical alignment of items within a flex container. The available classes are:

In this example, the items-center class vertically centers the items within the flex container.

Note

If you are looking for something specific, please follow the link.