What is the default value of justify content?

Question

MDN has the default value of justify-content as normal but that's not listed in the list of accepted values.

What is a normal value?

normal
The items are packed in their default position as if no justify-content value was set. This value behaves as stretch in grid and flex containers.

I've seen other sites list it as flex-start. What is the default value?

I might have answered my own question by looking at the spec:

normal otherwise behaves as start.

Answer 1

You should pay attention because justify-content is defined in two different specifications and the trick is here.

The first specifciation is this one: https://drafts.csswg.org/css-align-3/#propdef-justify-content which is a draft one. The purpose of this specification is to allow us to align all kind of elements using the same properties:

CSS Levels 1 and 2 allowed for the alignment of text via text-align and the alignment of blocks by balancing auto margins. However, except in table cells, vertical alignment was not possible. As CSS adds further capabilities, the ability to align boxes in various dimensions becomes more critical. This module attempts to create a cohesive and common box alignment model to share among all of CSS.

Inside you will find that justify-content can be used with all the elements and it has indeed a value called normal. The behavior of this value depend on the context where its applied.

For flexbox and CSS grid you will see

normal behaves as stretch.

Also for flexbox you will see

The justify-content property applies along the main axis, but since stretching in the main axis is controlled by flex, stretch behaves as flex-start.

---

All the above is still in Draft and has no support yet. To find the real values of justify-content you should either see the Flexbox or CSS grid specification.

In the Flexbox one such value doesn't exist:

Name: justify-content

Value: flex-start | flex-end | center | space-between | space-around

Initial: flex-start

Using normal value will either be considered as invalid and the initial value will be used or will be considered as valid and it will fall back to flex-start, the intial value.

In the CSS grid specification they are already linking to the draft one so you can assume all the values exist but you need to pay attention to the browser support of some of them.

---

Basically the MDN page is combining all the specifications which make it a but confusing.

In the future justify-content will have 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