What Are The Default Values For Justify-content & Align Content?

This link (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) says the default for values justify-content & align-content is flex-start and stretch retrospectively. MDN

Solution 1:

You need to consider the specification to find this and you need to pay attention because there is two specifications defining this.

The first one related to flexbox (the one you have to follow) gives the initial value as flex-start for justify-content and stretch for align-items. This is the Flexbox Level 1 specification and it's widely supported.

The second one is related to future alignment techniques. This specification is still in Draft mode and will define new way to align items in different contexts (Flexbox/Grid/Block/multicol/.. containers). The default value is normal for both properties (justify-content and align-items)

If you continue the reading you can see that normal will fallback to stretch in the flexbox context and for justify-contentstretch behave as flex-start

So in all the cases, it's safe to assume that the initial value is flex-start for justify-content since normal will fallback to it (same for align-items where you can consider stretch as default)

In other words, normal is a special keyword (like auto for example) that will have a different behavior based on the context. So we cannot really define what normal will do. We can only do it in a particular context (Flexbox/Grid/Block/multicol/.. containers) and for each property.

You can also use normal without any issue because it will either:

1. be considered an invalid value (no implementing of the new Specification) and the browser will use the initial one (flex-start or stretch defined in the Flexbox Specification)
2. or be considered as valid value (the new Specification is implemented, even partially) and will also fallback to previous values.

Example where you will get the same result for all the cases whataver the browser:

.box {
  display:inline-flex;
  width:200px;
  height:200px;
  border:1px solid;
  justify-content:normal;
  align-items:normal;
}
.not-normal {
  justify-content:flex-start;
  align-items:stretch;
}
.initial {
  justify-content:initial;
  align-items:initial;
}
.boxspan {
  background:red;
  padding:10px;
}

<p>using normal</p><divclass="box"><span> some text here</span></div><divclass="box"style="flex-direction:column;"><span> some text here</span></div><p>using flex-start/stretch</p><divclass="box not-normal"><span> some text here</span></div><divclass="box not-normal"style="flex-direction:column;"><span> some text here</span></div><p>using initial</p><divclass="box not-normal"><span> some text here</span></div><divclass="box not-normal"style="flex-direction:column;"><span> some text here</span></div>

---

The MDN is a bit confusing because it groups both specification making it hard to understand but you can clearly see that it links to both specifications at the end: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Specifications. Follow them to get more accurate details (it can be a bit boring but be patient ..)

Related questions to see how the MDN can be missleading:

How does justify-items work on display:block elements

Flexbox in responsive table layout: Column not stretching to full height

Does it make any sense to use `baseline` value with `justify-content`, `justify-items` or `justify-self` in CSS Flex/Grid?

What is the default value of justify content?

Solution 2:

if justify-content or align-content is not explicitly indicated, it will assume normal as value

Otherwise, justify-contenthas a default value of flex-start and align-content has stretch