Skip to main content

Layouts | Flex System

How It Works​

The flex system in Tailwind CSS is a powerful tool for creating flexible and responsive layouts for your web applications. It allows you to control the alignment, direction, and order of your elements using a set of predefined classes.

To use the flex system in Tailwind CSS, you will first need to apply the flex layout to a parent element using the flex class. This will make the element a flex container, and its child elements will become flex items.

Once you have a flex container, you can use the following classes to control the layout of your flex items:

  1. items-start, items-center, items-end: These classes align the flex items along the cross axis (vertically, if the flex container has a horizontal main axis).

  2. justify-start, justify-center, justify-end: These classes align the flex items along the main axis (horizontally, if the flex container has a horizontal main axis).

  3. flex-grow: This class allows a flex item to grow to fill any available space in the flex container.

  4. flex-shrink: This class allows a flex item to shrink if necessary to fit within the flex container.

  5. flex-no-grow: This class prevents a flex item from growing to fill any available space in the flex container.

  6. flex-no-shrink: This class prevents a flex item from shrinking to fit within the flex container.

In addition to these classes, Tailwind CSS also provides a number of other classes for controlling the layout of your flex items, including:

  1. flex-wrap: This class allows the flex items to wrap onto multiple lines if necessary.

  2. flex-nowrap: This class prevents the flex items from wrapping onto multiple lines.

  3. flex-col: This class changes the direction of the flex container to be vertical, with the flex items arranged in a column.