-2

Is there a good reason why this site says the initial value of align-content is stretch when it's normal (according to MDN)?

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
tonitone120
  • 1,920
  • 3
  • 8
  • 25
  • According to the [technical recommendation](https://www.w3.org/TR/css-flexbox-1/#align-content-property) `stretch` should be the default. `normal` doesn't even exist in the linked specification - it might just be a synonym for `stretch` though. – fredrik Sep 28 '20 at 13:25
  • @fredrik `normal` does exist in the linked spec (MDN), but as the `initial` value. This question is still off-topic, since asking why a website's information doesn't match spec isn't even remotely a good question for Stack Overflow. – disinfor Sep 28 '20 at 13:27
  • @disinfor Well, that's not a specification - it's a documentation of implementation. – fredrik Sep 28 '20 at 13:30
  • Yeah, on the MDN, scroll down to the Formal Definition section: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#Formal_definition – disinfor Sep 28 '20 at 13:31
  • misread your last comment - so updated above. – fredrik Sep 28 '20 at 13:31
  • Scroll down to the Specification section then: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content#Specifications - MDN states that the `initial` value is `normal`. But as you point out in the W3.org, it should be `stretch`. So, that means the MDN is wrong (at least since I would *think* W3 would be the definitive answer) - I'm curious if the recommendation is just that - a recommendation that has yet to be implemented. – disinfor Sep 28 '20 at 13:35
  • Align-content was originally defined in the CSS Flexbox spec, and its initial value was "stretch". But the new alignment properties needed to be reused elsewhere, such as grid, so they're being moved to the CSS Box Alignment spec. In that, the initial value is given as "normal" and it says that for flex containers, "normal" behaves as "stretch". – Alohci Sep 29 '20 at 00:04
  • 1
    Voted to reopen the question on the grounds that it *can* be answered with facts and citations. – Alohci Sep 29 '20 at 00:28
  • 1
    @disinfor - Not "to be implemented", but the opposite, outdated. Both Chrome and Firefox now use "normal" as the initial value, which is in accordance with the Box Alignment draft spec. – Alohci Sep 29 '20 at 01:33
  • @Alohci that's good to know. I still think this question should be closed since it's asking why a particular website lists the property default as `stretch` compared to the MDN documentation. Sure, the question can be answered with the spec definition, but we'd have to ask Chris Coyer why his website has `stretch` listed (which I'm guessing is because the spec was different when the content was authored). Yeah, CSS tricks has a bit of "authority" on CSS tips, but this is akin to asking why a found website has information different than the spec. – disinfor Sep 29 '20 at 13:03
  • @disinfor such question should indeed be answered like perfectly made by Alohci and it's not opinion based. The Specfication evolve in time but not all the article around the net follow it. It's then important to clarify such thing. I'd like to see such question answerd instead of the trivial questions about implementing trivial layout using flexbox where we get 10 answers in 2min – Temani Afif Sep 29 '20 at 13:49
  • why are you repeating the same question after 3 months? doesn't make sense ... I know that the other account is also yours ... – Temani Afif Sep 29 '20 at 13:51
  • @TemaniAfif yeah, I think Alohci's answer is great and is based with facts - but I still say that this is asking why does a random website have different information than the spec. Since, as developers we should be using the spec, the spec answers the original question. – disinfor Sep 29 '20 at 14:39
  • 1
    @disinfor *Since, as developers we should be using the spec, the spec answers the original question.* --> 80% of the developers doesn't know that the spec exist, 15% of the developers think that the spec is W3Schools, 4% think it's MDN and only 1% have the good information. Lucky you, you are in that 1% but it's not the case of everyone. The answer should then explain that the spec exist and we need to follow it. – Temani Afif Sep 29 '20 at 14:43
  • _80% of the developers doesn't know that the spec exists_ and that's the sad part. – disinfor Sep 29 '20 at 15:14

1 Answers1

1

MDN's page is a little confused, but this is something of object lesson in how specifications develop.

As we all know, the alignment properties of CSS 2.x are both confusing and limited, and weren't ever going to meet the requirements of Flex Box.

So the spec writers of the CSS Flexbox Level 1 spec invented new alignment and distribution properties, justify-content, align-content, align-items and align-self. The value of align-content that was judged most useful as a default for flexbox was stretch, so that was made the initial value.

But following not far behind flexbox was the Grid layout Level 1 spec. It made no sense to invent yet another set of alignment properties for that, so the flexbox ones got reused. Additionally, there is a desire to fix the limitation of the 2.x alignment capabilities by applying these to older layout models like the block and columnar models. Which means that having the definition of the properties in the Flexbox spec was out-of-place.

So they're being moved to the CSS Box Alignment spec.

In the case of Grid layouts, align-content:stretch is still a good initial value choice. But if it was chosen as an initial value for block layouts, its defined behaviour would be incompatible will what web pages do today. To get around that, the initial value is redefined there to be normal, which can be interpreted as "whatever web pages do today in all contexts".

So then, it defines the behaviour for align-content:normal for Flex layouts to be the same as align-content:stretch giving it perfect backward compatibility with the FlexBox spec. It defines align-content:normal the same for Grid layouts. For other layouts though, it defines the behaviour differently, such that it's compatible with how those layouts work today.

Note that Firefox and Chrome implement some parts of the Box Alignment spec, such as align-content:normal as the initial value, but not other parts such as applying the properties to block layouts, where there is still much doubt about how and whether it can be added in a way that doesn't break existing web pages. For that reason, that spec is still at draft status.

It's easy to see from this that there will be some inconsistencies between what articles written at different times say about the properties, and why there is some confusion about the property values used.

Alohci
  • 78,296
  • 16
  • 112
  • 156