Many typos on Basic concepts of flexbox page

[Hexstream]

MDN URL

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

What specific section or headline is this issue about?

Various, see below.

What information was incorrect, unhelpful, or incomplete?

Multi-line flex containers with flex-wrap

"and they" does not make sense:

If you set it to nowrap, which is the initial value, and they will shrink to fit the container.

This should probably be (just remove "and"):

If you set it to nowrap, which is the initial value, they will shrink to fit the container.

Properties applied to flex items

"distribute" should be "distributed":

The flex properties that we apply to the items themselves, enable dictating how that available space should be distribute among the sibling flex items.

Shorthand values for the flex properties

"of for" does not make sense:

Setting flex: initial resets the item to the initial values of for the three longhand properties, which is the same as flex: 0 1 auto.

Removing either word would probably work, I'm not sure which wording is more prevalent in MDN documentation.

Setting flex: initial resets the item to the initial values of the three longhand properties, which is the same as flex: 0 1 auto.

Setting flex: initial resets the item to the initial values for the three longhand properties, which is the same as flex: 0 1 auto.

Shorthand values for the flex properties

This is the same as writing flex: 1 1 0 or flex: 2 1 0 and so on, respectively. The items can grow and shrink from a flex-basis of 0.

Can the items really shrink from a flex-basis of 0? This seems confusing at best.

align-items

"align" should be "aligns":

The align-items property align all the flex items on the cross axis.

place-items and place-content

"and" doesn't seem like the best word here:

If set on a flex container, it will set the alignment but not the justification, and justify-items is ignored in flexbox.

I would suggest "as" or "since":

If set on a flex container, it will set the alignment but not the justification, as justify-items is ignored in flexbox.

If set on a flex container, it will set the alignment but not the justification, since justify-items is ignored in flexbox.

What did you expect to see?

No typos.

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/web/css/css_flexible_box_layout/basic_concepts_of_flexbox
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md
• Last commit: 5b20f5f
• Document last modified: 2024-12-19T15:37:45.000Z

[OnkarRuikar]

@Hexstream could you submit a pull request to fix the page content?

[Hexstream]

Sorry, I'm too busy to onboard myself for that kind of contribution, as previously said.

[mohammednumaan]

Hey @Hexstream, I'm currently working on this issue and I wanted to clarify something.

Can the items really shrink from a flex-basis of 0? This seems confusing at best.

It could possibly shrink if there is some content within the container, since it would initialize it to that particular width. But this can cause confusion when there is no content within the flex-container (which in most cases is unlikely). What improvements do you think I can include here to avoid confusion?

[Hexstream]

Thank you for raising the question!

Unfortunately, I am not yet clear on the details of what a flex-basis of 0 really means,
so I feel someone who does should help elucidate the question.