Flex in Tailwind

Introduction

Tailwind CSS is a utility first CSS framework, designed for developers to grow and create new web interfaces that are easy to use. It boasts a lot of functionality – one would be the Flexbox utility classes that allow for writing responsive feature sets of layouts. In the following article, further details and an example of how to employ different Flex utilities in Tailwind CSS for designing reliable layouts are provided.

What is Flexbox?

Flexbox or, in its full name the Flexible Box Layout Module is a newer CSS layout model that aims to help in building responsive and efficient layouts for elements placed in a container regardless to their size, or the size which they might change in future. Flexbox is easier to implement than the grid, especially when it comes complex structures in the development of multi-column layouts where the user is given more control over the alignment and spaces between placed objects and the layout of the page.

Flex Utilities in Tailwind CSS

Tailwind CSS provides a range of utility classes that correspond to various Flexbox properties. Here’s a breakdown of these utilities and how to use them:

1. Flex Container

To create a flex container, you use the flex class. This class applies display: flex to an element, making it a flex container.

<div class='flex bg-green-200 p-3'>
    <div class='border bg-black  border-red-300 h-20 p-9'>
    </div>
    <div class='border bg-black  mx-2 border-red-300 h-20 p-9'>
    </div>
</div>

2. Direction

The flex-direction property specifies the direction of the flex items. Tailwind CSS offers the following utilities:

• flex-row: Default, items are placed in a row.
• flex-row-reverse: Items are placed in a row in reverse order.
• flex-col: Items are placed in a column.
• flex-col-reverse: Items are placed in a column in reverse order.

 <div class="flex flex-row bg-pink-300 p-9">
    <div class='border border-blue-700 p-4 bg-red mx-4'>Item 1</div>
    <div class='border border-blue-700 p-4 bg-red mx-4'>Item 2</div>
    <div class='border border-blue-700 p-4 bg-red mx-4'>Item 3</div>
  </div>

3. Justify Content

The justify-content property aligns items along the main axis (horizontal by default). Tailwind provides several utilities for this:

• justify-start: Align items to the start.
• justify-center: Center items.
• justify-end: Align items to the end.
• justify-between: Distribute items evenly with space between.
• justify-around: Distribute items evenly with space around.
• justify-evenly: Distribute items evenly with equal space around them.

<div class="flex justify-center">
  <div class='border border-blue-700 p-4 bg-red mx-4'>Item 1</div>
  <div class='border border-blue-700 p-4 bg-red mx-4'>Item 2</div>
  <div class='border border-blue-700 p-4 bg-red mx-4'>Item 3</div>
</div>

4. Align Items

The align-items property aligns items along the cross axis (vertical by default). The available utilities are:

• items-start: Align items to the start.
• items-center: Center items.
• items-end: Align items to the end.
• items-baseline: Align items along the baseline.
• items-stretch: Stretch items to fill the container.

<div class="flex items-center">
  <div class='border border-blue-700 p-4 bg-red-700 text-white mx-4'>Item 1</div>
  <div class='border border-blue-700 p-4 bg-red-700 text-white mx-4'>Item 2</div>
  <div class='border border-blue-700 p-4 bg-red-700 text-white mx-4'>Item 3</div>
</div>

5. Align Self

The align-self property overrides the align-items property for individual flex items. Tailwind provides the following utilities:

• self-auto: Default, aligns the item according to the container’s align-items property.
• self-start: Align the item to the start.
• self-center: Center the item.
• self-end: Align the item to the end.
• self-baseline: Align the item along the baseline.
• self-stretch: Stretch the item to fill the container.

<div class="flex">
  <div class="self-start">Item 1</div>
  <div class="self-center">Item 2</div>
  <div class="self-end">Item 3</div>
</div>

6. Flex Wrap

The flex-wrap property specifies whether the flex items should wrap or not. The utilities provided by Tailwind are:

• flex-nowrap: Items do not wrap.
• flex-wrap: Items wrap to the next line.
• flex-wrap-reverse: Items wrap to the next line in reverse order.

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

7. Align Content

The align-content property aligns flex lines when there is extra space in the cross axis. Tailwind offers:

• content-start: Align lines to the start.
• content-center: Center lines.
• content-end: Align lines to the end.
• content-between: Distribute lines evenly with space between.
• content-around: Distribute lines evenly with space around.
• content-evenly: Distribute lines evenly with equal space around them.

 <div class="h-56 grid grid-cols-3 gap-4 content-start ...">
  <div class='border border-red-300 bg-green-500 text-white text-center text-2xl'>01</div>
  <div class='border border-red-300 bg-green-500 text-white text-center text-2xl'>02</div>
  <div class='border border-red-300 bg-green-500 text-white text-center text-2xl'>03</div>
  <div class='border border-red-300 bg-green-500 text-white text-center text-2xl'>04</div>
  <div class='border border-red-300 bg-green-500 text-white text-center text-2xl'>05</div>
</div>

8. Flex Grow, Shrink, and Basis

Tailwind CSS also provides utilities for controlling the flex-grow, flex-shrink, and flex-basis properties:

• flex-grow-0: Do not grow.
• flex-grow: Grow to fill the container.
• flex-shrink-0: Do not shrink.
• flex-shrink: Shrink if necessary.
• flex-initial: Set to initial size.
• flex-1: Set flex-grow and flex-shrink to 1 and flex-basis to 0.

<div class="flex ">
  <div class="flex-none w-14 h-14 bg-blue-400">
    01
  </div>
  <div class="flex-grow bg-red-400 h-14 ">
    02
  </div>
  <div class="flex-shrink w-64 h-14 bg-yellow-500">
    03
  </div>
</div>

Conclusion

The flexbox utilities enable developers to arrange elements in various flexible ways on application, requiring little additional code. With these utilities, you can achieve many intricate designs without typing the usual CSS rules from scratch. Whether you already know all the secret tricks of front-end development, or you only start your path in web development and know how much you need utilities like Tailwind CSS Flex, your work will be faster and more effective.

Frequently Asked Questions