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.

index

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:

Class	Description
`flex-row`	Places items in a row (default).
`flex-col`	Places items in a column.
`flex-row-reverse`	Places items in a reversed row.
`flex-col-reverse`	Places items in a reversed column.

index

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:

Class	Description
`justify-start`	Aligns items to the start.
`justify-center`	Aligns items to the center.
`justify-end`	Aligns items to the end.
`justify-between`	Distributes items evenly with space between them.
`justify-around`	Distributes items evenly with space around them.
`justify-evenly`	Distributes items evenly with equal space around them.

index

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:

Class	Description
`items-start`	Aligns items to the start.
`items-center`	Aligns items to the center.
`items-end`	Aligns items to the end.
`items-baseline`	Aligns items along their baseline.
`items-stretch`	Stretches items to fill the container (default).

index

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.

Everything was clear?

Thanks for your feedback!

Section 4. Chapter 3