In this section, we will learn what the flex justify-content property is and how to use it in CSS.

Click here to run the example of flex justify-content property.

CSS flex justify-content Property Definition and Usage

By default, the flex-items sit next to each other from the start point of the Main-Axis toward the end of it and if the container had available space, it’ll appear at the end of Main-Axis.

Of course this is the default behavior and CSS provided a property named `justify-content` by which we can position flex-items differently along the Main-Axis of the container and so as a result, the available space along the Main-Axis (if any) will be spread differently than just appearing at the end point of this Axis.

CSS flex justify-content Property Syntax

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

CSS flex justify-content Property Value

The values we set for `justify-content` and their effect are explained below.

• flex-start: this is the default value and it makes the flex-items to sit next to each other from the start point of the Main-Axis toward the end of it. The remained space of the container will appear at the end of the Main-Axis. (Unless there’s a margin for each flex-item, there won’t be any space between them)
• flex-end: this value is the opposite of “flex-start” value.
• center: using this value, the flex-items will be placed at the center of their flex-line along the Main-Axis and any remained a space of the container will appear evenly around the last and the first flex-items. (unless there’s a margin for each flex-item, there won’t be any space between them)
• space-between: Using this value, the first flex-item will be positioned at the start point of the Main-Axis and the last flex-item will be positioned at the end of the Main-Axis. The remained space of the container will appear evenly between the rests of flex-items.
• space-around: this value is similar to “space-between” but also adds even space before and after the first and the last flex-items.

Note: Spacing is applied after margins and flex-grow values are calculated. This means if any items have a non-zero `flex-grow` value or any items have an auto margin on the main axis, then `justify-content` has no effect.

Example: justify-content space between

See the Pen flex justify-content space between by Omid Dehghan (@enjoytutorials1) on CodePen.

Another Example:

See the Pen Another example1 by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS flex justify-content property-n

See the Pen CSS flex justify-content property-n by Omid Dehghan (@enjoytutorials1) on CodePen.