Tailwind CSS Flex layout - How to use flexbox with Tailwind

In this Quick Overview, we will delve into Flex in Tailwind CSS. We will explore what flex layouts are, how to use them with Tailwind CSS and how they can be responsive using variants. Additionally, we will talk about flex direction, wrapping, order, alignment, placement, and the usage of arbitrary values with Tailwind flex classes.

What is flexbox?

The Flexbox layout, also known as "Flexible Box", is a simple layout method used to manage the space between elements in a container. It makes it easy to control the order, alignment, and size of elements, improving the design of responsive user interfaces.

Before flexbox, developers used table and float layouts, which were less flexible. Flexbox streamlines the CSS layout process by letting items in a container grow or shrink based on the container size or the content inside.

How to use flex in Tailwind

To start using flex with Tailwind, apply the flex class to a container. The framework comprises several utility classes to control the size and behavior of flex items within the container:

• flex: Enables flex layout for a container.
• flex-1: Sets the flex-grow and flex-shrink property to 1, allowing the item to grow or shrink as needed, ignoring its initial size.
• flex-auto: Makes the item grow or shrink based on its content and available space (taking into account it's initial size)
• flex-initial: Resets an item's flex properties to their initial values and allows an item to shrink but not grow.
• flex-none: Disables growing and shrinking for an item.

Here is a basic example that shows where to place these classes:

<!-- this is the container -->
<div class="flex">
  <!-- these are the items inside the container -->
  <div class="flex-1">Item 1</div>
  <div class="flex-auto">Item 2</div>
  <div class="flex-none">Item 3</div>
</div>

Change flex behavior in Tailwind

Besides the classes mentioned above to change the behavior of flex items, Tailwind CSS also provides classes to control the direction, alignment, and placement of items in a container.

Grow and shrink

To control the growth or shrinkage of flex items, Tailwind CSS provides specific utility classes. To make an item grow based on available space, use the grow class. Conversely, prevent growth with the grow-0 class. Here's an example:

<div class="flex">
  <div class="grow-0">This item is not growing</div>
  <div class="grow">This item is growing!</div>
  <div class="grow-0">This item is not growing</div>
</div>

For shrinking, the shrink class allows items to shrink according to available space. Alternatively, use the shrink-0 class to prevent items from shrinking. See the following example:

<div class="flex">
  <div class="shrink-0 basis-80">This item is not shrinking</div>
  <div class="shrink basis-80">This item is shrinking!</div>
  <div class="shrink-0 basis-80">This item is not shrinking</div>
</div>

Wrap

Using the flex-wrap utility class permits flex items to wrap when space is insufficient. Conversely, the flex-nowrap class ensures items won't wrap, even if space is limited. To alter the order in which elements wrap, the flex-wrap-reverse class reverses the wrapping direction. View the examples below:

<div class="flex flex-wrap">
  <div class="basis-1/2">Item 1</div>
  <div class="basis-1/2">Item 2</div>
  <div class="basis-1/2">Item 3</div>
</div>

<div class="flex flex-nowrap">
  <div class="basis-1/2">Item 1</div>
  <div class="basis-1/2">Item 2</div>
  <div class="basis-1/2">Item 3</div>
</div>

<div class="flex flex-wrap-reverse">
  <div class="basis-1/2">Item 1</div>
  <div class="basis-1/2">Item 2</div>
  <div class="basis-1/2">Item 3</div>
</div>

Direction

There are also classes for adjustments to item layout direction. The following classes determine layout orientation:

• flex-row: Default layout where items are arranged horizontally.
• flex-row-reverse: Arranges items horizontally in reverse order.
• flex-col: Arranges items vertically in a column.
• flex-col-reverse: Arranges items vertically in a reversed column.

See the code snippet below:

<div class="flex flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="flex flex-row-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="flex flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="flex flex-col-reverse">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Basis

Establishing a base size for flex items is possible with the basis-{value} utility classes. All values are either in default Tailwind unit (1 = 0.25 rem = 4 pixels), as a fraction or full/auto. Here's an example showing the use of these classes:

<div class="flex">
  <div class="basis-32">Item 1</div>
  <div class="basis-1/2">Item 2</div>
  <div class="basis-auto">Item 3</div>
</div>

Order

To adjust the order of flex items, use the order-{value} utility classes. Tailwind CSS supports twelve values ranging from 1 to 12, as well as first, last and none.

<div class="flex">
  <div class="order-1">Item 1</div>
  <div class="order-3">Item 2</div>
  <div class="order-2">Item 3</div>
</div>

Here is another example showing the use of order-first, order-none, arbitrary values and negative values:

<div class="flex">
  <div class="order-first">Item 1</div>
  <div class="order-last">Item 2</div>
  <div class="order-[200]">Item 3</div>
  <div class="-order-1">Item 4</div>
</div>

Gap

There are also gap classes such as gap-{value}, gap-x-{value}, and gap-y-{value} utility classes for controlling space between flex items. For example:

<div class="flex gap-4">
  <div class="basis-1/2">Item 1</div>
  <div class="basis-1/2">Item 2</div>
  <div class="basis-1/2">Item 3</div>
  <div class="basis-1/2">Item 4</div>
</div>

<div class="flex gap-y-6">
  <div class="basis-1/2">Item 1</div>
  <div class="basis-1/2">Item 2</div>
  <div class="basis-1/2">Item 3</div>
  <div class="basis-1/2">Item 4</div>
</div>

<div class="flex gap-x-[15px]">
  <div class="basis-1/2">Item 1</div>
  <div class="basis-1/2">Item 2</div>
  <div class="basis-1/2">Item 3</div>
  <div class="basis-1/2">Item 4</div>
</div>

Justify and align flex items in Tailwind

Tailwind CSS provides a number of utility classes for aligning and justifying flex items. It can be quite confusing as to what the difference between these classes is. Below is a quick overview along with examples.

Justify content

The Tailwind CSS class justify-{position} (also called justify-content) distributes space between and around items within the container along the main axis. Possible values for position are normal, start, center, end, between, around and evenly.

Sidenote: the class justify-stretch exists but cannot be used by flexboxes.

<div class="flex justify-{position}">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Examples for justify-{position}

Place these classes on the parent container that also contains the class flex.

Align content, self and items

Tailwind CSS provides three classes to control the alignment of flex items: content-{position}, self-{position} and items-{position}. Here's a brief overview of each one:

• content-{position}: This class (also called align-content) sets the alignment of the flex lines inside the container in the cross-axis when there is extra space. The position can be normal, start, center, end, between, around, evenly, stretch and baseline. Place this class on the parent container with the flex class.
• self-{position}: This class (also called align-self) controls the alignment of an individual flex item within a container on the cross-axis. The position can be start, center, end, stretch, auto and baseline. Add this class to any individual flex item within a flex container.
• items-{position}: This class (also called align-items) controls the alignment of all flex items within a container on the cross-axis. The position can be start, center, end, baseline, and stretch. Place this class on the parent container with the flex class.

<div class="flex content-{position}">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex items-{position}">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex">
  <div class="self-{position}">Item 1</div>
  <div>Item 2</div>
</div>

Examples for content-{position}

Place these classes on the parent container that also contains the class flex.

Examples for self-{position}

Place these classes on the individual item. It's especially useful if you want to override the alignment of a single item.

Examples for items-{position}

Place these classes on the parent container that also contains the class flex.

Final Thoughts

Flex utility classes in Tailwind CSS provide a simple and effective way to create flexbox containers and align content. In this blog post, we have covered what flex in Tailwind is and how it can be used.

Check out all the Tailwind CSS flex (and grid) classes here: Tailwind CSS Flex Classes.

Want to get quick feedback when developing and see what all flex-related classes do instantly? Try out Tailscan below!