Tailwind CSS - Justify Content

Previous
Quiz
Next

Tailwind CSS Justify Content is a utility class used to align flex and grid items along the main axis or horizontal plane.

Tailwind CSS Justify Content Classes

The following is the list of Tailwind CSS Justify Content Classes that help in the effective alignment of flex and grid items along the main axis.

Class CSS Properties
justify-normal justify-content: normal;
justify-start justify-content: flex-start;
justify-end justify-content: flex-end;
justify-center justify-content: center;
justify-between justify-content: space-between;
justify-around justify-content: space-around;
justify-evenly justify-content: space-evenly;
justify-stretch justify-content: stretch;

Functionality of Tailwind CSS Justify Content Classes

  • justify-normal: This class has default behavior to align items normally depending upon the direction of the text.
  • justify-start: This class is used to align items to the start of their container.
  • justify-end: This class is used to align items to the end of their container.
  • justify-center: This class is used to align items to the center of their container.
  • justify-between: This class is used to align items along the main axis with equal space between each item.
  • justify-around: This class aligns items along the main axis with equal space around each item.
  • justify-evenly: This class aligns items along the main axis with equal space between each item and the edges of the container.
  • justify-stretch: This class stretches the flex or grid items to fill the available space in the container while maintaining their aspect ratio.

Tailwind CSS Justify Content Classes Examples

The following examples will illustrate the Tailwind CSS Justify Content class utility.

Flex Items Normal Alignment

The justify-normal class sets the default positioning of items, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Normal Class
    </h2>
    <div class="flex justify-normal gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex Items Starting & Ending Alignment

The justify-start & justify-end class sets the flex items to be positioned at the starting and ending points along the main axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Start Class
    </h2>
    <div class="flex justify-start gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify End Class
    </h2>
    <div class="flex justify-end gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex Items Center Alignment

The justify-center class sets the flex items to be positioned at the center along the main axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Center Class
    </h2>
    <div class="flex justify-center gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex Items Between & Around Alignment

The justify-between & justify-around class sets the flex items to be positioned having equal space between and around the items along the main axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Between Class
    </h2>
    <div class="flex justify-between gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
    <br>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Around Class
    </h2>
    <div class="flex justify-around gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Flex Items Evenly Alignment

The justify-evenly class sets the even space between items, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Evenly Class
    </h2>
    <div class="flex justify-evenly gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20 w-20">1</div>
        <div class="bg-blue-400 h-20 w-20">2</div>
    </div>
</body>

</html>

Grid Items Stretched Alignment

The justify-stretch class stretches the items to fill the available space, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Stretch Class
    </h2>
    <div class="grid grid-flow-col justify-stretch gap-x-3 
                border-2 border-green-500 p-4">
        <div class="bg-pink-400 h-20">1</div>
        <div class="bg-blue-400 h-20">2</div>
    </div>
</body>

</html>
Print Page
Previous
Next