From 7a87a3b4b000705b79f5047b60fbe8d5d099edd2 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 17 Jun 2024 17:33:16 -0700 Subject: [PATCH 1/4] CSS maintenance: flex-basis property --- files/en-us/web/css/flex-basis/index.md | 33 +++++++++---------------- 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/files/en-us/web/css/flex-basis/index.md b/files/en-us/web/css/flex-basis/index.md index 112d3dd7d94072b..d7d3def5621f438 100644 --- a/files/en-us/web/css/flex-basis/index.md +++ b/files/en-us/web/css/flex-basis/index.md @@ -7,19 +7,15 @@ browser-compat: css.properties.flex-basis {{CSSRef}} -The **`flex-basis`** [CSS](/en-US/docs/Web/CSS) property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with {{Cssxref("box-sizing")}}. +The **`flex-basis`** [CSS](/en-US/docs/Web/CSS) property sets the initial main size of a {{glossary("flex item")}}. It sets the size of the content box unless otherwise set with {{Cssxref("box-sizing")}}. {{EmbedInteractiveExample("pages/css/flex-basis.html")}} In this example, the {{cssxref("flex-grow")}} and {{cssxref("flex-shrink")}} properties are both set to `1` on all three items, indicating that the flex item can grow and shrink from the initial `flex-basis`. -The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at 200px but then shrink to fit the space available with the other items being at least `min-content` sized. +The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at `200px` but then shrink to fit the space available with the other items being at least `min-content` sized. -The image below shows how the Firefox [Flexbox Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) helps you understand the size items become: - -![The Firefox Flexbox Inspector showing the size of the item once it has shrunk.](firefox-flex-basis.png) - -> **Note:** In case both `flex-basis` (other than `auto`) and `width` (or `height` in case of `flex-direction: column`) are set for an element, `flex-basis` has priority. +In `flex-basis` is set to a value other than `auto` and there is a `width` (or `height` in case of `flex-direction: column`) set for that same flex item, the `flex-basis` value takes precedence. ## Syntax @@ -54,22 +50,16 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w - : Any of the following units: - {{cssxref("<length>")}} sets an absolute value - - {{cssxref("<percentage>")}} sets a percentage of the width or height of a containing block's content area - - `auto` uses the value of the [width](https://drafts.csswg.org/css2/#the-width-property) in horizontal writing mode, and the value of the [height](https://drafts.csswg.org/css2/#the-height-property) in vertical writing mode; when the corresponding value is also `auto`, the `content` value is used instead - - `max-content` sets the intrinsic preferred width - - `min-content` sets the intrinsic minimum width - - `fit-content` sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element + - {{cssxref("<percentage>")}} sets a percentage of the width or height of the containing block's content area + - `auto` uses the value of the {{cssxref("width")}} in horizontal writing mode, and the value of the {{cssxref("height")}} in vertical writing mode; when the corresponding value is also `auto`, the `content` value is used instead + - {{cssxref("max-content")}} sets the intrinsic preferred width + - {{cssxref("min-content")}} sets the intrinsic minimum width + - {{cssxref("fit-content")}} sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element - `content` - : Indicates automatic sizing, based on the flex item's content. - > **Note:** This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using `auto` together with a main size ([width](https://drafts.csswg.org/css2/#the-width-property) or [height](https://drafts.csswg.org/css2/#the-height-property)) of `auto`. - > - > - Originally, `flex-basis:auto` meant "look at my `width` or `height` property". - > - Then, `flex-basis:auto` was changed to mean automatic sizing, and "main-size" was introduced as the "look at my `width` or `height` property" keyword. It was implemented in [Firefox bug 1032922](https://bugzil.la/1032922). - > - Then, that change was reverted in [Firefox bug 1093316](https://bugzil.la/1093316), so `auto` once again means "look at my `width` or `height` property"; and a new `content` keyword is being introduced to trigger automatic sizing. ([Firefox bug 1105111](https://bugzil.la/1105111) covers adding that keyword). - ## Formal definition {{cssinfo}} @@ -187,6 +177,7 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w ## See also -- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ -- CSS Flexbox Guide: _[Controlling Ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ -- {{cssxref("width")}} +- {{cssxref("flex")}} shorthand +- [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) +- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module From 6f8c289514a1a92e6cfcc94d3aeef33c919ab7b6 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 17 Jun 2024 20:17:05 -0700 Subject: [PATCH 2/4] use flex --- files/en-us/web/css/flex-basis/index.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/files/en-us/web/css/flex-basis/index.md b/files/en-us/web/css/flex-basis/index.md index d7d3def5621f438..e5f92f71d561b02 100644 --- a/files/en-us/web/css/flex-basis/index.md +++ b/files/en-us/web/css/flex-basis/index.md @@ -13,6 +13,9 @@ The **`flex-basis`** [CSS](/en-US/docs/Web/CSS) property sets the initial main s In this example, the {{cssxref("flex-grow")}} and {{cssxref("flex-shrink")}} properties are both set to `1` on all three items, indicating that the flex item can grow and shrink from the initial `flex-basis`. +> [!NOTE] +> It is recommended to use the {{cssxref("flex")}} shorthand instead of separate `flex-grow`, `flex-shrink`, and `flex-basis` declarations. We have separated them here as this document is about one of the shorthand components: the `flex-basis` property. + The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at `200px` but then shrink to fit the space available with the other items being at least `min-content` sized. In `flex-basis` is set to a value other than `auto` and there is a `width` (or `height` in case of `flex-direction: column`) set for that same flex item, the `flex-basis` value takes precedence. From 473c5be1c7b312222bac507645c41c03b0a7f7d1 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Sat, 22 Jun 2024 12:28:15 -0700 Subject: [PATCH 3/4] Update index.md --- files/en-us/web/css/flex-basis/index.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/files/en-us/web/css/flex-basis/index.md b/files/en-us/web/css/flex-basis/index.md index 3bdcf03560a6abe..ffcb6a05ad7dd60 100644 --- a/files/en-us/web/css/flex-basis/index.md +++ b/files/en-us/web/css/flex-basis/index.md @@ -182,8 +182,6 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w - {{cssxref("flex")}} shorthand - {{cssxref("inline-size")}} -- {{cssxref("min-content")}} -- {{cssxref("max-content")}} - [Basic concepts of flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) -- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module \ No newline at end of file +- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module From 44e03bea08181a04dc83a2e5480d251b1adb147b Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 24 Jun 2024 10:57:27 -0700 Subject: [PATCH 4/4] Edits per review --- .../web/css/flex-basis/firefox-flex-basis.png | Bin 6405 -> 0 bytes files/en-us/web/css/flex-basis/index.md | 22 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) delete mode 100644 files/en-us/web/css/flex-basis/firefox-flex-basis.png diff --git a/files/en-us/web/css/flex-basis/firefox-flex-basis.png b/files/en-us/web/css/flex-basis/firefox-flex-basis.png deleted file mode 100644 index 67eed0a641ff01120d473b0fd883cedc53ab962a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6405 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 [!NOTE] +> It is recommended to use the {{cssxref("flex")}} shorthand instead of separate `flex-grow`, `flex-shrink`, and `flex-basis` declarations. We have separated them here as this document is about one of the shorthand components: the `flex-basis` property. + {{EmbedInteractiveExample("pages/css/flex-basis.html")}} In this example, the {{cssxref("flex-grow")}} and {{cssxref("flex-shrink")}} properties are both set to `1` on all three items, indicating that the flex item can grow and shrink from the initial `flex-basis`. -> [!NOTE] -> It is recommended to use the {{cssxref("flex")}} shorthand instead of separate `flex-grow`, `flex-shrink`, and `flex-basis` declarations. We have separated them here as this document is about one of the shorthand components: the `flex-basis` property. - -The demo then changes the `flex-basis` on the first item. It will then grow and shrink from that flex-basis. This means that, for example, when the `flex-basis` of the first item is `200px`, it will start out at `200px` but then shrink to fit the space available with the other items being at least `min-content` sized. +The demo changes the `flex-basis` value set on the first flex item, causing it to grow or shrink to fill the available space. The other flex items will also change size; they will be at least `min-content`-sized. For example, when the `flex-basis` of the first item is set to `200px`, it will start at `200px` but then shrink to fit the space available. -In `flex-basis` is set to a value other than `auto` and there is a `width` (or `height` in case of `flex-direction: column`) set for that same flex item, the `flex-basis` value takes precedence. +If `flex-basis` is set to a value other than `auto` and there is a `width` (or `height` in case of `flex-direction: column`) set for that same flex item, the `flex-basis` value takes precedence. ## Syntax @@ -52,12 +52,12 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w - `<'width'>` - : Any of the following units: - - {{cssxref("<length>")}} sets an absolute value - - {{cssxref("<percentage>")}} sets a percentage of the width or height of the containing block's content area - - `auto` uses the value of the {{cssxref("width")}} in horizontal writing mode, and the value of the {{cssxref("height")}} in vertical writing mode; when the corresponding value is also `auto`, the `content` value is used instead - - {{cssxref("max-content")}} sets the intrinsic preferred width - - {{cssxref("min-content")}} sets the intrinsic minimum width - - {{cssxref("fit-content")}} sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element + - {{cssxref("<length>")}} sets an absolute value. + - {{cssxref("<percentage>")}} sets a percentage of the width or height of the containing block's content area. + - `auto` uses the value of the {{cssxref("width")}} in horizontal writing mode, and the value of the {{cssxref("height")}} in vertical writing mode; when the corresponding value is also `auto`, the `content` value is used instead. + - {{cssxref("max-content")}} sets the intrinsic preferred width. + - {{cssxref("min-content")}} sets the intrinsic minimum width. + - {{cssxref("fit-content")}} sets the maximum possible size of a containing block's content area, bounded by the `min-content` and `max-content` values, and calculated based on the content of the current element. - `content`