What are the default values for justify-content & align content?
To be more accurate, default value is actually called initial value which is the correct word. I will be using both of them in my answer considering that both have exactly the same meaning
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-content
stretch
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:
- be considered an invalid value (no implementing of the new Specification) and the browser will use the
initial
one (flex-start
orstretch
defined in the Flexbox Specification) - 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;
}
.box span {
background:red;
padding:10px;
}
<p>using normal</p>
<div class="box"><span> some text here</span></div>
<div class="box" style="flex-direction:column;"><span> some text here</span></div>
<p>using flex-start/stretch</p>
<div class="box not-normal"><span> some text here</span></div>
<div class="box not-normal" style="flex-direction:column;"><span> some text here</span></div>
<p>using initial</p>
<div class="box not-normal"><span> some text here</span></div>
<div class="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?