From 88a4e50f8c9a31e6967dd3282cc1a913f7732e61 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Wed, 8 Jan 2025 01:21:06 +0100 Subject: [PATCH 01/16] fix: auto-cleanup by bot (#37550) chore: auto-fix Markdownlint, Prettier, and front-matter issues --- .../css_flexible_box_layout/basic_concepts_of_flexbox/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index 3e29e72fa4adc59..fc85d54f56c87f0 100644 --- a/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/en-us/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -137,8 +137,7 @@ The live sample below has `flex-direction` set to `row-reverse`. Try the other v While flexbox is a one dimensional model, it is possible to make flex items wrap across multiple lines. If you do this, you should consider each line as a new flex container. Any space distribution will happen across each line, without reference to the previous or subsequent lines. - -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, 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](/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content) 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, 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](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow) if the items were not able to shrink, or could not shrink small enough to fit. ```html live-sample___flex-wrap