Skip to content

Commit

Permalink
CSS maintenance: flex-basis property (#34233)
Browse files Browse the repository at this point in the history
* CSS maintenance: flex-basis property

* use flex

* Update index.md

* Edits per review
  • Loading branch information
estelle authored Jun 24, 2024
1 parent 0508613 commit be86d10
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 20 deletions.
Binary file not shown.
35 changes: 15 additions & 20 deletions files/en-us/web/css/flex-basis/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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("&lt;length&gt;")}} sets an absolute value
- {{cssxref("&lt;percentage&gt;")}} 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("&lt;length&gt;")}} sets an absolute value.
- {{cssxref("&lt;percentage&gt;")}} 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}}
Expand Down Expand Up @@ -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

0 comments on commit be86d10

Please sign in to comment.