CODEWITHSUNDEEP
cssflexbox
ilyo
ilyo

Reputation: 36411

When does flex-grow switch to flex-shrink, and vice-versa?

I don't understand what makes flex items switch from grow to shrink behavior? At first I thought it is the flex-basis value, but what if only one item has it, or none?

Also, the specs on flex-basis say:

The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item.

What does that mean? If I have one item with it, and the rest are default, why is it usually starts a little bigger than the value? Where does the added space come from?

Upvotes: 10

Views: 1830

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371719

The flex-basis property sets the initial main size of the flex item, before free space is distributed by other flex properties.

This means that the flex item is first sized for its defined width (in flex-direction: row) or height (in flex-direction: column).

In other words, in a row-direction flex container, where flex-basis: 100px is equivalent to width: 100px, the item would have a width of 100px.

That's the initial main size.

THEN, other flex properties are applied. Namely, flex-grow and flex-shrink.

If the container is wider than 100px, then flex-grow: 1 expands the item to fill the extra space.

If the container is less than 100px, then flex-grow: 1 is ignored and flex-shrink: 1 reduces the size of the item according to a flex sizing algorithm.

So, to answer your question:

When does flex switch from grow to shrink?

Assuming both properties are enabled (i.e., they are not flex-grow: 0 or flex-shrink: 0), the switch will occur when the sum total of flex-basis / width / height on flex items is no longer less or more than the length of the container.

To make this a bit more clear:

  • When the sum total of flex-basis / width / height on flex items is no longer more than the length of the container, this means there is no overflow and the items don't consume all available space. flex-grow works.

  • When the sum total of flex-basis / width / height on flex items is no longer less than the length of the container, this means there is overflow and the items must shrink to fit inside the container. flex-shrink works.

From the spec:

flex-grow

This [property] 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.

flex-shrink

This [property] specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

flex-basis

This [property] specifies the initial main size of the flex item, before free space is distributed according to the flex factors.

https://www.w3.org/TR/css-flexbox-1/#flex-property

Upvotes: 10

Hynes
Hynes

Reputation: 3424

Flex items don't switch from growing to shrink. Instead think of the parameters as the way to set the minimum, maximum, and flexible width. Using flex-grow, flex-shrink, and flex-basis, you can tell your element how it should act.

The default values for flex-grow, flex-shrink, and flex-basis is 0 1 auto (defined usually within the flex shorthand: flex: 0 1 auto;). This means, by default flex containers will not fill any remaining space. Their size is determined by the content within it (mostly).

Setting a flex-grow value to 1 tells the element to fill the remaining space within the container row. If there are sibling elements, divide that space evenly. Setting the value to greater than 1 tells it make that element relatively larger than all other items. (Source: W3Schools.com)

With a default value of 1 for flex-shrink, this means the element will shrink relative to other elements. Not have it shrink, set the value to 0. This means once the element hits the minimum width for an element, it will not shrink any further. Otherwise it would continue to relatively shrink.

The default value for flex-basis is auto, meaning it will automatically determine the width based on the other elements around it. Quoting from W3Schools.com,

The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit. 1

Upvotes: 1

Related Questions