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
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.
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.