Maintenance: CSS flex guide: updates to guide 1 #34148

estelle · 2024-06-14T05:47:47Z

Flexbox is not longer new, and there have been values and properties added since this guide was written. This update adds the missing values and properties, and just freshens up the guide.

addressed as part of CSS baseline / interop openwebdocs/project#189 - subcomponent openwebdocs/project#202

github-actions · 2024-06-14T05:49:24Z

Preview URLs

(comment last updated: 2024-06-14 19:56:16)

bsmth · 2024-06-14T09:23:59Z

files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md

@@ -6,17 +6,17 @@ page-type: guide

 {{CSSRef}}

-The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.
+The [flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module, usually referred to as flexbox, is a one-dimensional layout model,distributing space between items in an interface with powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.


Typo, plus a suggestion for readability. I'm not sure about "space between items in an interface", maybe we can drop it? What do you think?

Suggested change

The [flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module, usually referred to as flexbox, is a one-dimensional layout model,distributing space between items in an interface with powerful alignment capabilities. This article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides.

The [flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module (usually referred to as flexbox) is a one-dimensional layout model for distributing space between items and includes numerous alignment capabilities. This article gives an outline of the main features of flexbox, which we will explore in more detail in the rest of these guides.

completely agree!

files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md

bsmth · 2024-06-14T09:28:22Z

files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md


-To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap. Set it to `nowrap`, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using `nowrap` would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.
+To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, if your items are too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a `width`. The total width of the items is too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap. Set it to `nowrap`, which is the initial value, and they will shrink to fit the container. They shrink because they are using initial flexbox values, including `flex-shrink: 1`, that allows items to shrink. Using `nowrap` would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.


Suggested change

To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, if your items are too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a `width`. The total width of the items is too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap. Set it to `nowrap`, which is the initial value, and they will shrink to fit the container. They shrink because they are using initial flexbox values, including `flex-shrink: 1`, that allows items to shrink. Using `nowrap` would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

To cause wrapping behavior add the property {{cssxref("flex-wrap")}} with a value of `wrap`. Now, if your items are too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a `width`. The total width of the items is too wide for the flex container. As `flex-wrap` is set to `wrap`, the items wrap across multiple lines. If you set it to `nowrap`, which is the initial value, and they will shrink to fit the container. They shrink because they are using initial flexbox values, including `flex-shrink: 1`, that allows items to shrink. Using `nowrap` would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

Should we link "overflow" to something?

Linked to the learn explanation of scroll overflow.

files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md

bsmth · 2024-06-14T09:36:43Z

Nice improvements, a couple of comments for you to have a look at 👀

bsmth

Looking good! Ready to merge when you are 🚢

estelle added 2 commits June 13, 2024 20:16

CSS guide: updates to intro to flex

bb3dfd6

CSS flex guide: updates to guide 1

d825c2e

estelle requested a review from a team as a code owner June 14, 2024 05:47

estelle requested review from bsmth and removed request for a team June 14, 2024 05:47

github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Jun 14, 2024

estelle changed the title ~~CSS flex guide: updates to guide 1~~ Maintenance: CSS flex guide: updates to guide 1 Jun 14, 2024

CSS flex guide: broken links

0cde77b

estelle mentioned this pull request Jun 14, 2024

Flexbox openwebdocs/project#202

Closed

29 tasks