Should we always use the flex property instead of flex-grow, flex-shrink, and flex-basis properties individually?

Question

Should we always use the flex property instead of flex-grow, flex-shrink, and flex-basis properties individually?

Answer

A few instances where using the flex property is unnecessary to use:

  • To set only the flex-basis and use the default flex-shrink: 1;
  • To set only the flex-basis and flex-shrink properties without specifying a flex-grow value as well, because we cannot set flex-shrink and flex-basis using two values for the flex property
  • To use only flex-shrink or flex-basis, we can however set flex-grow if we use a single value on the flex property
8 Likes

Not sure if this was changed after 2018, but if you set flex with a single value and unit, it will set flex-basis.

For example:

flex: 20px; //sets flex-basis for associated flex item

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

7 Likes

It makes sense after all. 20px isn’t a valid value for the flex-grow property as it isn’t a proportion (represented by a whole number)

3 Likes

Since we all know the default flex-grow is 0, we can always write it as flex: 0 1 300px if we do not need flex-grow, can we?

I would assume we could.

However, I could see the argument that it might be more clear to just state the flex-basis: 300px; since the other two values are default flex child values. I’d be interested to see what everyone else thinks on this subject too!