CSS justify-content Property

The justify-content property in CSS is used to align the flexible box container's items along the main axis of a flex container. This property manages space distribution between and around content items in a flex container.

Note: This property does not align items along the vertical axis. For vertical alignment, use the align-items property.

The alignment is possible after applying the lengths and auto margins properties, ie., if there is at least one flexible element, with flex-grow property, other than 0, in a Flexbox layout then it will not impact & have any effect as there won't be any available space.

Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;

Property Values

Here are the different property values used in CSS flexbox alignment, along with their descriptions:

Understanding Each Property

Below is a detailed explanation of each property, including its syntax and an example for better understanding:

1 . flext-start

The flex-start value aligns flex items at the start of the container, positioning them from the left side (or top in case of vertical alignment).

Syntax:

justify-content: flex-start;

Example: This example illustrates the justify-content property where the property value is set to flex-start to align the item from the start of the container.

Output:

👁 Image

2. Flex-End

The flex-end value aligns flex items at the end of the container, positioning them to the right side (or bottom in case of vertical alignment).

Syntax:

justify-content: flex-end;

Example: This example illustrates the justify-content property where the property value is set to flex-end.

Output:

👁 Image

3. Center

The center value aligns flex items at the center of the container, placing them equally between the start and end.

Syntax:

justify-content: center;

Example: This example illustrates the justify-content property where the property value is set to center.

Output:

👁 Image

4. Space-Between

The space-between value distributes flex items evenly across the container, with the first item aligned at the start and the last item aligned at the end.

Syntax:

justify-content: space-between;

Example: This example illustrates the justify-content property where the property value is set to space-between.

Output:

👁 Image

5. Space-Around

The space-around value distributes flex items with equal space around them, meaning there is equal space before, between, and after each item.

Syntax:

justify-content: space-around;

Example: This example illustrates the justify-content property where the property value is set to space-around.

Output:

👁 Image

6. Space-Evenly

The space-evenly value distributes flex items with equal space between them, including equal space at the start and end of the container.

Syntax:

justify-content: space-evenly;

Example: This example illustrates the justify-content property where the property value is set to space-evenly.

Output:

👁 Image

7. Initial

The initial value resets the justify-content property to its default value, which is usually flex-start in most cases.

Syntax:

justify-content: initial;

Example: This example illustrates the justify-content property where the property value is set to initial.

Output:

👁 Image

8. Inherit

The inherit value makes the flex items inherit the justify-content property from their parent element.

Syntax:

justify-content: inherit;

Example: This example illustrates the justify-content property where property value is set to inherit.

Output:

👁 Image

Supported Browsers

The browser supported by CSS justify-content property are listed below:

• Google Chrome 29.0 and above
• Internet Explorer 11.0 and above
• Microsoft Edge 12.0 and above
• Firefox 20.0 and above
• Opera 12.1 and above
• Safari 9.0 and above

Note: While most modern browsers support the justify-content property, it’s important to test your layout in older versions or fallback for Internet Explorer, which may have partial support for flexbox features.