flex-initial element doesn't explicitly use flex: initial

[Slapass]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

What specific section or headline is this issue about?

https://developer.mozilla.org/en-US/docs/Web/CSS/flex#examples

What information was incorrect, unhelpful, or incomplete?

I'm pretty sure in the example, under the CSS code, the #flex-initial is not set to flex initial, but the Result section says "flex: initial" has a flex value of initial

What did you expect to see?

I expected "#flex-initial { border: 1px solid #000; }" to also include flex:initial, bit it doesnt.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

[hamishwillee]

Thanks @Slapass

I think you're probably right. My guess is that either initial or none is the default value for for a flex item where no value has been specified - either would explain the observed example.

Either way this should be explicit for the purpose of the example and I think think we should state the default. @estelle Is that reasonable?

[Ashish-CodeJourney]

Raised a PR related to same https://github.com/mdn/content/pull/34031 Check Preview here : https://pr34031.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/flex

[estelle]

The issue here is that initial is set twice in the example syntax at the top, and then expressly defined in the values.

in the syntax we have:

 /* Keyword values */
flex: auto;
flex: initial;
flex: none;

and then have:

/* Global values */
flex: inherit;
flex: initial;
flex: revert;
flex: revert-layer;
flex: unset;

plus in the values, we have:

initial The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container. This is equivalent to setting "flex: 0 1 auto".

which is the first value. We likely should:

1. change the #initial-flex in the example to #default (edit required in HTML and CSS)
2. Keep the flex: initial out of it, as is current (no change)
3. Add text to say that the #default uses the initial value of 0 1 auto, in the explanation, not in the code.
4. Move the initial in the values to the end and explain that it is the default, a global value, and does not need to be explicitly declared.

[Josh-Cena]

@estelle I think it's better to be explicit since we are comparing auto with initial here. Copying my response from the PR:

I think this doc is somewhat confusing because it presents the values as if auto and initial are somewhat blessed. auto is just a part of the "one-value syntax" and expands to 1 1 auto by specifying the <flex-basis>, and initial is just the global keyword initial which means the default value which expands to 0 1 auto. The only "special keyword" is none. I think this PR is good in its current form because it makes the example less confusing but I don't think pointing out "initial is default" is helpful because "initial" literally expands to the default value. If we want to fix this confusion, we should remove auto and initial as special keyword values from the syntax section, but I'm not sure that's strictly necessary.

What do you think?