Flex main size and column ordering

[rolerik]

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

What specific section or headline is this issue about?

The flex model and Wrapping

What information was incorrect, unhelpful, or incomplete?

The flex model:

The text says "The length from the main-start edge to the main-end edge is the main size.", but in the image the main size is the size of a flex item. Which is correct?

Wrapping:

Why is the column ordering backwards (in the image) when applying flex-wrap? If the image uses "flex-direction: row-reverse" it would be better to include that in the CSS before the image.

What did you expect to see?

The flex model:

Main size going from left side (main start) to right side (main end) in the image.

Wrapping:

Articles ordered left-to-right from First to Fourth on the first row and Fifth to Eighth in the second row.

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

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/learn/css/css_layout/flexbox
• MDN URL: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/css/css_layout/flexbox/index.md
• Last commit: 07f8055
• Document last modified: 2024-08-08T06:59:08.000Z

[Josh-Cena]

This was fixed in #34531 but then changed again in #35337. @estelle you approved both; which one is correct though?

[jolka-ef]

@Josh-Cena
I would like to apologize in advance for my inadequate level of English proficiency.
I am not a native speaker :)

The flex model:
I looked into documentation.
"
main size
main size property
The width or height of a flex container or flex item,
whichever is in the main dimension, is that box’s main size. Its main size property is thus either its width or height property, whichever is in the main dimension.
"

So the text and the image are both correct, but they explain the main sizes of different elements (the image shows it for a flex item, and the text talks about a flex container).