How to use Tailwind CSS flexbox?

Tailwind CSS remains the most popular CSS framework in 2024. Its utility-first, mobile-first approach has made it a go-to choice for developers over the years.

In my previous blog, we explored Tailwind’s grid system. Today, we’ll dive into the Tailwind Flex System and learn how to use it to create responsive, flexible layouts.

Prerequisites & Assumptions

This blog assumes that you're already familiar with the fundamentals of both Tailwind CSS and Flexbox. Here, we’ll focus solely on how to use Tailwind’s flex utilities for building clean and effective layouts.

If you need a refresher, check out these resources:

• Tailwind documentation
• Flexbox cheatsheet

Also, the images added in each section have some basic CSS to improve aesthetics. As a result, if you copy and paste the included code into your file, it will look a bit different than the screenshot. The visuals are less accurate than the code.

Setting Up a Flex Layout with Tailwind

To enable Flexbox, you need to apply the flex or inline-flex class to the parent container:

<section class="flex">
	<!-- flex items -->
</section>

If you want an inline flex container, use inline-flex instead of flex.

Quick note: The inline-flex class makes the FLEX CONTAINER inline, not the flex items. There is no difference in how flex items are rendered in both classes.

The flex items will be aligned in a row (on the horizontal axis) by default.

Controlling Flex Direction

Tailwind offers classes to define the direction of flex items along the main axis:

• flex-row: The default. It arranges items horizontally from left to right. For RTL languages (e.g., Arabic, Hebrew), it arranges them right to left.

• flex-col: Aligns items vertically from top to bottom.

  <section class="flex flex-col">
  	<!-- flex items -->
  </section>
  

Additionally, you can reverse the order with:

• flex-row-reverse: This class arranges items in horizontally reverse order. This means the first element in the DOM is on the rightmost side of the screen.

  <section class="flex flex-row-reverse">
  	<!-- flex items -->
  </section>
  

• flex-col-reverse: Similarly, this class arranges its items in vertically reverse order. The first DOM element is displayed at the last on the screen.

  <section class="flex flex-col-reverse">
  	<!-- flex items -->
  </section>
  

Flex Wrapping

Flexbox lets you control whether items wrap onto multiple lines. Tailwind offers these utilities:

• flex-nowrap: The default. Items remain on a single line, which may cause overflow if the container’s width is smaller.
• flex-wrap: Items wrap onto multiple lines in the same order.
• flex-wrap-reverse: Items wrap onto multiple lines but in reverse order.

Justifying Content Along the Main Axis

Tailwind provides several classes to control item alignment along the main axis (horizontal or vertical, depending on flex-direction):

• justify-start: Aligns items to the start (default).
• justify-center: Centers items.
• justify-end: Aligns items to the end.
• justify-between: Distributes items evenly, with the first item at the start and the last at the end.
• justify-around: Spaces items evenly with equal space around them.
• justify-evenly: Spaces items evenly with equal space between them.

Aligning Items Along the Cross Axis

Tailwind provides utilities to control alignment along the cross axis:

• items-stretch: Stretches items to fill the container (default).

• items-start: Aligns items to the start of the cross axis.

• items-center: Centers items along the cross axis.

• items-end: Aligns items to the end of the cross axis.

• items-baseline: Aligns items based on their baseline.

  

  Flex Align Items in Tailwind

Aligning Individual Flex Items

The align-self property allows individual items to have different alignments on the cross axis from others. Tailwind’s classes for this include:

• self-start: Aligns the item to the start of the cross axis.
• self-end: Aligns the item to the end.
• self-center: Centers the item.
• self-stretch: Stretches the item to fill the container.
• self-auto: Uses the default alignment specified by the parent container.
• self-baseline: Aligns the item with the container's baseline.

<section class="flex p-1h-32 gap-4 rounded-lg border">
	<div class="size-16 self-start">1</div>
	<div class="size-16 self-end">2</div>
	<div class="size-16 self-center">3</div>
	<div class="w-10 self-stretch">4</div>
	<div class="size-16 self-auto">5</div>
	<div class="self-baseline">Text 6</div>
</section>

It'd align items like the following:

Setting the Flex-Basis

The flex-basis property defines the initial size of a flex item. Tailwind offers a variety of basis-{size} utilities:

• basis-auto: Sets item size based on content.
• basis-full: Item takes up 100% of the container.
• basis-*: Ranged from 0 (0px) to 96 (24rem) with a step of four.
• basis-1/3, basis-2/3: Items take up 33.33% and 66.66% of the container, respectively.

<section class="flex gap-4 h-32">
	<div class="basis-auto">Auto</div>
	<div class="basis-full">Full Width</div>
	<div class="basis-16">16 (4rem)</div>
	<div class="basis-1/3">1/3 Width</div>
	<div class="basis-2/3">2/3 Width</div>
</section>

Here is how different items take the size based on it:

Controlling Flex Growth

The flex-grow property determines how much an item will grow relative to others. Tailwind provides:

• grow: Allows the item to grow and fill available space.
• grow-0: Prevents the item from growing.

<section class="flex w-full gap-2 p-4 border rounded-lg">
	<div class="flex-grow">flex-grow: 1</div>
	<div class="flex-grow-0">flex-grow: 0</div>
	<div class="flex-grow">flex-grow: 1</div>
</section>

This is how items will render:

Controlling Flex Shrinking

The flex-shrink property controls whether items shrink to fit the container. Tailwind’s classes for this include:

• shrink: Allows items to shrink.
• shrink-0: Prevents shrinking.

<section class="flex w-64 gap-2 rounded-lg border p-4">
	<div class="h-16 w-32 flex-shrink-0">flex-shrink: 0</div>
	<div class="h-16 w-32 flex-shrink">flex-shrink: 1</div>
	<div class="h-16 w-32 flex-shrink">flex-shrink: 1</div>
</section>

This is how items will render:

Reordering Flex Items

The order property lets you change the visual order of flex items without altering the HTML structure. Tailwind provides the following utilities:

• order-first: Moves the item to the first position.
• order-last: Moves the item to the last position.
• order-none: Default order (0).
• order-{number}: Specifies the order with a positive or negative integer (e.g., order-1, order-12, order-[-1]).

Note: This utility is zero-based by default. This means order-0 will place an item in the natural order, and other order values adjust relative to that.

<section class="flex gap-4">
	<div class="order-2 size-16 ">1</div>
	<div class="order-3 size-16 ">2</div>
	<div class="order-last size-16">3</div>
	<div class="size-16">4</div>
	<div class="order-first size-16">5</div>
</section>

Look how items are re-arranged, based on the order property:

Wrapping up

In this blog, we've explored the various ways to utilize the Tailwind Flex System, from setting up basic flex layouts to creating complex, responsive designs. Tailwind provides a comprehensive set of predefined classes that simplify working with Flexbox, making it easier to build clean and effective layouts.

I hope you found this blog helpful. If you did, share this with your peers and communities so they can learn from it as well. I’d also love to know if it helped you. I am most active on Peerlist and Twitter. Feel free to ping me.

And if you are looking for a Frontend Developer Jobs, you will find many good opportunities on Peerlist Jobs. Don't forget to check them out.

Until then, keep building! 👨‍💻