It is crucial to pay attention to the definition of justify-content as it differs across two specifications, making it a tricky concept to grasp.
The first specification can be found at: https://drafts.csswg.org/css-align-3/#propdef-justify-content, and serves the purpose of providing a unified approach to aligning various elements using consistent properties. This draft aims to establish a common box alignment model within CSS.
Within this specification, justify-content offers a value known as normal, which behaves differently based on its application context.
In the realm of flexbox and CSS grid, justify-content operates in specific ways:
For both flexbox and CSS grid, normal essentially functions as stretch.
With flexbox, justify-content applies along the main axis, where stretch is interpreted as flex-start due to flex's control over stretching behavior.
Despite being part of a draft, the values described here lack support. To find authoritative values for justify-content, one must refer directly to the Flexbox or CSS grid specifications.
In the Flexbox specification, there is no presence of such a value:
Name: justify-content
Value: flex-start | flex-end | center | space-between | space-around
Initial: flex-start
Usage of the normal value may either result in an invalid input leading back to the initial value, or be recognized as valid falling back to flex-start by default.
In the CSS grid specification, reference is made to the draft version with all values available; however, caution is advised regarding browser support for certain values.
The MDN page combines information from multiple specifications, potentially causing confusion among readers.
Future iterations of justify-content will encompass the following values:
normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ]
<content-distribution> = space-between | space-around | space-evenly | stretch
<overflow-position> = unsafe | safe
<content-position> = center | start | end | flex-start | flex-end