Menu
I wonder if flex-grow:0 in the Flexbox model means
width:0
orIf it means the latter, is it save to say that this is equal to width:auto and display:inline-block, i.e. it takes just as much width as needed to display?
240
flex: <positive-number> Equivalent to flex: 1 0px . It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.
“For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.”
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. Note: If the element is not a flexible item, the flex-grow property has no effect.
flex-grow and flex-basis Just a quick recap: flex-grow will take the remaining space and divide it by the total amount of flex grow values. The resulting quotient is multiplied by the respective flex-grow value and the result is added to each child elements initial width.
flex-grow:0 simply means that the item won't be resized during item size calculation to accommodate flex container's full main axis size.
Specification describes it as:
This
<number>component setsflex-growlonghand and specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to1.
I've emphasized main axis size above beacuse you should know that flex-grow is related to main axis of the flex container which can be width or height dimension depending on flex-direction and writing directionality of user browser.
Therefore we can't assume being equal to your assumption.
But when we're talking about flex-direction: row and writing directionality LRTB (left to right, top to bottom) then they do work in the similar fashion as width: auto;. Items do appear as inlined, but they still don't render the same because no whitespace is being added for each line break in HTML source as we normally see with usual inline elements.
width: 0?Flex item width is associated with flex-basis property rather than grow factor. Although flex properties have precedence over width or height of items when grow and shrink factors are defined and non-zero.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
