3

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 (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content & https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) says the default values for these properties are normal.

Which one's correct?/How am I meant to interpret this?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
tonitone106
  • 149
  • 7

2 Answers2

6

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:

  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;
}
.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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • The question didn't ask about behavior, it asked about default value. Current browsers set the default to `normal` (which may, of course, change in the future as browsers follow evolving standards). – Ouroborus Jun 12 '20 at 19:46
  • @Ouroborus browser never define default value of properties. Browser can only define default styles which is a different story. Default value are only coverd by the specification and I am not describing any behavior of properties. I am describing how the specification is defining the value and more precisely the default one. – Temani Afif Jun 12 '20 at 19:49
  • For example, you say "initial value is `flex-start` for `justify-content` since `normal` will fallback to it". The initial value of `justify-content` is `normal`. The behavior of `normal` may be similar to `flex-start` in certain situations, but the initial value of `justify-content` will still be `normal` regardless of context. – Ouroborus Jun 12 '20 at 20:06
  • @Ouroborus intial value depend on the Spec. The initial value evolve. It's actually `flex-start` considering the flexbox spec and normal considering the new spec which still in draft. I am explaining this difference because if you are using an old browser, normal will be an invalid value BUT since normal will fallback to flex-start I said *it's safe to assume* that flex-start is the default value because IN ALL the cases normal will fallback to flex-start for justify-content as defined in the Spec. If your think I am wrong please show me a link explaining that normal can behave differently – Temani Afif Jun 12 '20 at 20:07
  • No, initial value depends on browser implementation. Browser implementation can/should, but is not required to, follow spec. (Further, modern W3C specifications are more of a description of the current state of implementation rather than a specification of how things must be implemented, as stated in the introductory paragraphs on https://www.w3.org/standards/). – Ouroborus Jun 12 '20 at 20:17
  • Thanks @TemaniAfif. So MDN has one page for `justify-content` that details values of a working draft W3C specification? I find myself copy and saving W3C links because I don't know how to navigate that website. I am getting ok at CSS and would like to have been able to navigate it and get to the Flex-box page, for example. Any pointers / resources you can show that'd help achieve this goal? – tonitone106 Jun 12 '20 at 20:27
  • @Ouroborus can you give me one example of browser violating the Spec of initial value? There is no reason for browser to not follow the specification for basic stuff and if it's the case, it's considered as a bug and will be fixed in the next realeses. Even if all the browsers don't follow the Spec, I still insist on the fact that only the Spec define how initial value should behave. Browser do impelementation and not specification. – Temani Afif Jun 12 '20 at 20:28
  • @tonitone106 you are already doing good using MDN but as I said in my answer always consider the links to the Specification at the bottom of the MDN page. They always link to the official ressource so you can get the full detail – Temani Afif Jun 12 '20 at 20:29
  • Examples are easy to come by. Check any CSS test (for example, css3test.com). W3C does not write specifications anymore despite still using "specification" in the document titles, they write current-state-of-the-technology documents. (I believe this is why they're mostly perpetual working drafts.) If you want to know what a default *should* be, check W3C; if you want to know what it actually is, check the browser. As a counter question: In what situation (other than dev/user override) does a browser set those properties to anything other than `normal`? – Ouroborus Jun 12 '20 at 21:34
  • https://css3test.com/ and similar sites (like caniuse) give browser compatibilty/support of properties/values. In any way they will told you a browser is using a different default value than the one defined by W3C. *if you want to know what it actually is, check the browser* --> as I told you, give me one example where the browser is not following W3C with initial value. Also the *counter question* is for you. I didn't menton browser in my answers. I only detailed Spec and I have gave an example to prove that browser are following it (still waiting for you to proove the opposite) – Temani Afif Jun 12 '20 at 21:44
  • For example, you point to Flexbox Level 1 where it states the initial value for `justify-content` is `flex-start` and go on to say it's widely supported, as though this is the current implementation. However, browsers use `normal` as the initial value for `justify-content`. This makes sense if browsers use CSS Box Alignment Module Level 3 instead, a draft you talk about as though it were yet to be implemented. Browsers can't help but be in conflict with one or the other. – Ouroborus Jun 12 '20 at 22:33
  • @Ouroborus Flexbox Level 1 is the current Spec and the one FULLY implemented by browsers. The other Spec is sitll in draft and no browser is implementing it fully. A draft doesn't mean you should not implement it. Browser can anticipate and start the implementation when they want (you can find plenty of examples) because many parts of the Draft are considered to be well detailed and will not change a lot. Read that draft and you will see that 80% of it is not supported anywhere, only few things related to flexbox and CSS grid are considered. – Temani Afif Jun 12 '20 at 22:40
  • @Ouroborus Still there is no conflict because in both cases the browser is *following* the specification either implementing the first one, the second one or both of them, etc and when we have many Specification dealing the same property, the latter one will be the one to always consider. A lot of things evolved in CSS and browser are following this without any conflict. That's why we have Level in Specification. When Level 3 is the current Spec we should no more refer to Level 1 unless you are using a old browser that didn't implement the Level 3. again in both cases, the Spec is respected. – Temani Afif Jun 12 '20 at 22:43
  • @Ouroborus check this for more details : https://meta.stackoverflow.com/a/385583/8620333 – Temani Afif Jun 12 '20 at 22:45
0

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

Calvin Coderes
  • 27
  • 1