57

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.

0

1 Answer 1

87

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.

4
  • When setting flex: 1, each item will have the same size- How is that size determined? What is the benchmark?
    – Kevin Wu
    Commented Feb 14, 2016 at 19:33
  • @KevinWu The flex grow factor determines how a flex item will grow to cover available space relatively to others. If all have flex-grow: 1, they will grow the same.
    – Oriol
    Commented Feb 14, 2016 at 19:36
  • @KevinWu, this related post may also help you understand flex-grow: stackoverflow.com/q/34644807/3597276 Commented Feb 14, 2016 at 19:56
  • 1
    For a graphical representation of what @Oriol wrote, check out this: w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg
    – tonix
    Commented Jun 13, 2020 at 8:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.