Tailwind CSS Justify Content (original) (raw)

Last Updated : 23 Jul, 2025

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:

...

**Example:

HTML `

GeeksforGeeks

`

**Output:

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

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

`

**Output:

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

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

`

**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:

...

**Example:

HTML `

GeeksforGeeks

`

**Output:

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

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

`

**Output:

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

**Syntax:

...

**Example:

HTML `

GeeksforGeeks

`

**Output: