CODEWITHSUNDEEP
cssflexbox
Kevin Wu
Kevin Wu

Reputation: 1487

Understanding the difference between the flex and flex-grow properties

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.

Upvotes: 61

Views: 26337

Answers (1)

Oriol
Oriol

Reputation: 288520

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.

Upvotes: 92

Related Questions