Maintenance: CSS flex guide: updates to guide 5 #34237
Open
+56
−61
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Preview URLs (comment last updated: 2024-06-29 02:05:18) |
|
This pull request has merge conflicts that must be resolved before it can be merged. |
...eb/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md
Outdated
Show resolved
Hide resolved
…_of_flex_items_along_the_main_axis/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
dipikabh
requested changes
Jun 28, 2024
...eb/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md
Outdated
Show resolved
Hide resolved
...eb/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md
Outdated
Show resolved
Hide resolved
...eb/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md
Outdated
Show resolved
Hide resolved
...eb/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md
Outdated
Show resolved
Hide resolved
...eb/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md
Outdated
Show resolved
Hide resolved
Comment on lines
156
to
158
| 2. Is `flex-basis` set to `auto`? If so, the size is based on the item size. | ||
| 3. Is `flex-basis` a length or percentage, but not zero? If so this is the size of the item (floored at `min-content`). | ||
| 4. Is `flex-basis` set to `0`? If so, the item's size is not taken into consideration for the space-sharing calculation. |
There was a problem hiding this comment.
Suggested change
| 2. Is `flex-basis` set to `auto`? If so, the size is based on the item size. | |
| 3. Is `flex-basis` a length or percentage, but not zero? If so this is the size of the item (floored at `min-content`). | |
| 4. Is `flex-basis` set to `0`? If so, the item's size is not taken into consideration for the space-sharing calculation. | |
| - Is `flex-basis` set to `auto`? If so, the size will be based on the item's content size. | |
| - Is `flex-basis` a length or a percentage, but not zero? If so, this will be the size of the item (floored at `min-content`). | |
| - Is `flex-basis` set to `0`? If so, the item's size will not be taken into consideration for the space-sharing calculation. |
| 4. Is `flex-basis` set to `0`? if so then the item size is not taken into consideration for the space-sharing calculation. | ||
| 2. Is `flex-basis` set to `auto`? If so, the size is based on the item size. | ||
| 3. Is `flex-basis` a length or percentage, but not zero? If so this is the size of the item (floored at `min-content`). | ||
| 4. Is `flex-basis` set to `0`? If so, the item's size is not taken into consideration for the space-sharing calculation. | ||
|
|
||
| ### Do we have available space? | ||
|
|
||
| Items can't grow with no positive free space, and they won't shrink unless there is negative free space. |
There was a problem hiding this comment.
Suggested change
| Items can't grow with no positive free space, and they won't shrink unless there is negative free space. | |
| Items can't grow without positive free space, and they won't shrink unless there is negative free space. |
Comment on lines
164
to
165
| 1. If we add up the widths of all the items (or heights if working in a column), is that total **less** than the total width (or height) of the container? If so, then you have positive free space and `flex-grow` comes into play. | ||
| 2. If we add up the widths of all the items (or heights if working in a column), is that total **more** than the total width (or height) of the container? If so, you have negative free space and `flex-shrink` comes into play. |
There was a problem hiding this comment.
Suggested change
| 1. If we add up the widths of all the items (or heights if working in a column), is that total **less** than the total width (or height) of the container? If so, then you have positive free space and `flex-grow` comes into play. | |
| 2. If we add up the widths of all the items (or heights if working in a column), is that total **more** than the total width (or height) of the container? If so, you have negative free space and `flex-shrink` comes into play. | |
| - If we add up the widths of all the items (or heights if working in a column), is that total **less** than the total width (or height) of the container? If so, there will be positive free space, and `flex-grow` will come into play. | |
| - If we add up the widths of all the items (or heights if working in a column), is that total **more** than the total width (or height) of the container? If so, there will be negative free space, and `flex-shrink` will come into play. |
| 1. If we took all of the items and added up their widths (or heights if working in a column), is that total **less** than the total width (or height) of the container? If so, then you have positive free space and `flex-grow` comes into play. | ||
| 2. If we took all of the items and added up their widths (or heights if working in a column), is that total **more** than the total width (or height) of the container? If so, you have negative free space and `flex-shrink` comes into play. | ||
| 1. If we add up the widths of all the items (or heights if working in a column), is that total **less** than the total width (or height) of the container? If so, then you have positive free space and `flex-grow` comes into play. | ||
| 2. If we add up the widths of all the items (or heights if working in a column), is that total **more** than the total width (or height) of the container? If so, you have negative free space and `flex-shrink` comes into play. | ||
|
|
||
| ### Other ways to distribute space | ||
|
|
||
| If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items. |
There was a problem hiding this comment.
Suggested change
| If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items. | |
| If you do not want space added to the items, remember that you can manage free space between or around items using the alignment properties described in the guide for aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items. |
|
|
||
| ### Other ways to distribute space | ||
|
|
||
| If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items. | ||
|
|
||
| With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first. | ||
| With all these flex properties available to you, you will find that most tasks can be achieved, although it might take a little bit of experimentation at first. |
There was a problem hiding this comment.
Suggested change
| With all these flex properties available to you, you will find that most tasks can be achieved, although it might take a little bit of experimentation at first. | |
| With all these flex properties available to you, you will find that most layout tasks are possible, although it might take a little bit of experimentation at first. |
Co-authored-by: Dipika Bhattacharya <[email protected]>
|
|
||
| Working from a `flex-basis` of `0` this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items. | ||
| In the example below, we use `1` as the `flex-grow` factor for the first two items and double it to `2` for the third item. With `flex-basis: 0` set on all the items, the available space is distributed as follows: | ||
| 1. The `flex-grow` factor values of all the sibling flex items are added together (the total is 4 in this case). |
There was a problem hiding this comment.
[mdn-linter] reported by reviewdog 🐶
Suggested change
| 1. The `flex-grow` factor values of all the sibling flex items are added together (the total is 4 in this case). | |
| 1. The `flex-grow` factor values of all the sibling flex items are added together (the total is 4 in this case). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Flexbox is well-supported, and the content value is fully supported. This update freshens up the guide and removes a lot of words to tighten it up, then adds clarification text, so it's about the same size :(.
updating guide as part of CSS baseline / interop openwebdocs/project#189 - subcomponent openwebdocs/project#202