Tutorials


Flexbox Utilities in Tailwind CSS


Flexbox Utilities in Tailwind CSS

Tailwind CSS provides a set of utility classes for flexbox, which allow you to create flexible and responsive layouts with ease. These utilities cover various aspects of flexbox, including direction, content alignment, and item alignment.

1. Flexbox Direction

The flex-direction property controls the direction in which flex items are placed in the flex container. Tailwind CSS provides utility classes for the following flex directions:

  • flex-row: Aligns items horizontally (default behavior).
  • flex-row-reverse: Aligns items horizontally but in reverse order.
  • flex-col: Aligns items vertically.
  • flex-col-reverse: Aligns items vertically but in reverse order.

Example: Flexbox Direction

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Direction Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="flex flex-row bg-gray-200 p-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
  
  <div class="flex flex-col bg-gray-300 p-4 mt-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
</body>
</html>

In this example:

  • flex-row: Aligns items horizontally in the first container.
  • flex-col: Aligns items vertically in the second container.

2. Justify Content

The justify-content property controls the alignment of flex items along the main axis (horizontal axis for flex-row, vertical axis for flex-col). Tailwind CSS provides these utility classes:

  • justify-start: Aligns items to the start of the flex container.
  • justify-center: Aligns items to the center of the flex container.
  • justify-end: Aligns items to the end of the flex container.
  • 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 between them.

Example: Justify Content

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Justify Content Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="flex justify-start bg-gray-200 p-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
  
  <div class="flex justify-center bg-gray-300 p-4 mt-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
  
  <div class="flex justify-between bg-gray-400 p-4 mt-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
</body>
</html>

In this example:

  • justify-start: Aligns items to the start of the container.
  • justify-center: Aligns items to the center of the container.
  • justify-between: Distributes items evenly with space between them.

3. Align Items

The align-items property controls the alignment of flex items along the cross axis (vertical axis for flex-row, horizontal axis for flex-col). Tailwind CSS provides these utility classes:

  • items-start: Aligns items to the start of the cross axis.
  • items-center: Aligns items to the center of the cross axis.
  • items-end: Aligns items to the end of the cross axis.
  • items-baseline: Aligns items along their baseline.
  • items-stretch: Stretches items to fill the container (default behavior).

Example: Align Items

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align Items Example</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.0.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="flex items-start bg-gray-200 p-4 h-40">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
  
  <div class="flex items-center bg-gray-300 p-4 h-40 mt-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
  
  <div class="flex items-end bg-gray-400 p-4 h-40 mt-4">
    <div class="bg-blue-500 text-white p-4">Item 1</div>
    <div class="bg-green-500 text-white p-4">Item 2</div>
    <div class="bg-red-500 text-white p-4">Item 3</div>
  </div>
</body>
</html>

In this example:

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

Summary

  • Flexbox Direction: Controls the direction of flex items using flex-row, flex-row-reverse, flex-col, and flex-col-reverse.
  • Justify Content: Aligns items along the main axis using justify-start, justify-center, justify-end, justify-between, justify-around, and justify-evenly.
  • Align Items: Aligns items along the cross axis using items-start, items-center, items-end, items-baseline, and items-stretch.


Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about