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 67eed0a641ff011..000000000000000 Binary files a/files/en-us/web/css/flex-basis/firefox-flex-basis.png and /dev/null differ diff --git a/files/en-us/web/css/flex-basis/index.md b/files/en-us/web/css/flex-basis/index.md index 5c44297094e9127..66c71ad4fbc897c 100644 --- a/files/en-us/web/css/flex-basis/index.md +++ b/files/en-us/web/css/flex-basis/index.md @@ -7,19 +7,18 @@ 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")}}. + +> [!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`. -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 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. -![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. +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 @@ -53,23 +52,17 @@ 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 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("<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` - : 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 +180,8 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w ## See also +- {{cssxref("flex")}} shorthand +- {{cssxref("inline-size")}} - [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) -- {{cssxref("width")}} +- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module