Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS maintenance: flex-basis property #34233

Merged
merged 5 commits into from
Jun 24, 2024
Merged

CSS maintenance: flex-basis property #34233

merged 5 commits into from
Jun 24, 2024

Conversation

estelle
Copy link
Member

@estelle estelle commented Jun 18, 2024

remove history - content has been supported for a while in its final form.
add links to internal pages
removed image as it didn't really help clarify the concept
updated see also links to current writing guidelines
added some see also links

@estelle estelle requested a review from a team as a code owner June 18, 2024 00:35
@estelle estelle requested review from chrisdavidmills and removed request for a team June 18, 2024 00:35
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs size/s [PR only] 6-50 LoC changed labels Jun 18, 2024
Copy link
Contributor

github-actions bot commented Jun 18, 2024

Preview URLs

(comment last updated: 2024-06-24 17:59:15)

@estelle estelle mentioned this pull request Jun 18, 2024
29 tasks
@github-actions github-actions bot added the merge conflicts 🚧 [PR only] label Jun 21, 2024
Copy link
Contributor

This pull request has merge conflicts that must be resolved before it can be merged.

@github-actions github-actions bot removed the merge conflicts 🚧 [PR only] label Jun 22, 2024

![The Firefox flexbox inspector showing the size of the item once it has shrunk.](firefox-flex-basis.png)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this image need to be deleted too?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is deleted?

@hamishwillee hamishwillee self-requested a review June 24, 2024 00:24
Copy link
Contributor

@chrisdavidmills chrisdavidmills left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@estelle nice work, as always. I've only got some relatively minor comments, so I'm approving.


{{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.
> [!NOTE]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feels to me like this note should go below all the demo explanations, just above the "Syntax" heading. As it is, it kind of chops the explanation in half, which feels a bit weird.


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 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.


![The Firefox flexbox inspector showing the size of the item once it has shrunk.](firefox-flex-basis.png)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is deleted?

![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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

- `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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bullets all read nicely, but do they need full stops at the end of them? Only a minor nit.

@estelle estelle merged commit be86d10 into main Jun 24, 2024
9 checks passed
@estelle estelle deleted the estelle-patch-3 branch June 24, 2024 17:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs size/s [PR only] 6-50 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants