Tailwind CSS Justify Content

This class accepts two values in tailwind CSS. It is the alternative to the CSS justify-content property. This class is used to describe the alignment of the flexible box container. It contains the space between and around content items along the main axis of a flex container. It is basically used for controlling how flex and grid items are positioned along a container's main axis.

Justify Content classes:

• justify-start
• justify-end 
• justify-center 
• justify-between 
• justify-around 
• justify-evenly 

justify-start: It is used to align flex items from the start of the container.

Syntax:

<element class="justify-start">...</element>

Example:

Output:

justify-end: It is used to align flex items from the end of the container.

Syntax:

<element class="justify-end">...</element>

Example:

Output:

justify-center: It is used to align flex items from the center of the container.

Syntax:

<element class="justify-center">...</element>

Example:

Output:

justify-between: The flex items are placed with even spacing where the item is pushed to start and the last item is pushed to end.

Syntax:

<element class="justify-between">...</element>

Example:

Output:

justify-around: The flex items are placed with equal spacing from each other, the corners.

Syntax:

<element class="justify-around">...</element>

Example:

Output:

justify-evenly: The items are positioned with equal spacing between them but the spacing from corners differs.

Syntax:

<element class="justify-evenly">...</element>

Example:

Output: