Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Understanding the difference between the flex and flex-grow properties

Tags:

css

flexbox

What is the difference in effect between setting flex: 1; and setting flex-grow: 1;? When I set the former in my code, the two columns I have display with equal width, while they do not do so when I set the latter.

This is strange, as I assumed that setting flex: 1; only affects the flex-grow property.

like image 955
Kevin Wu Avatar asked Feb 14 '16 18:02

Kevin Wu


People also ask

What is the Flex-grow property?

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.

What is Flex-basis and flex-grow?

Conclusion. As a final recap: flex-basis controls how large an element will be along the main-axis before any growing or shrinking occurs. Flex-grow determines how much it will grow in proportion to sibling elements, and flex-shrink determines how much it will shrink.

How does flex-grow work?

The flex-grow property is a sub-property of the Flexible Box Layout module. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.


1 Answers

flex is a shorthand property of flex-grow, flex-shrink and flex-basis.

In this case, flex: 1 sets

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0 (in old spec drafts it was flex-basis: 0%)

If you only use flex-grow: 1, you will have

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: auto

Then, the difference is that the flex base size will be 0 in the first case, so the flex items will have the same size after distributing free space.

In the second case each flex item will start with the size given by its content, and then will grow or shrink according to free space. Most probably the sizes will end up being different.

like image 159
Oriol Avatar answered Oct 11 '22 15:10

Oriol