Rafee Muhammad Rafee Muhammad - 6 months ago 34
HTML Question

What does Flex:1 mean?

We all know,
The flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties.
And its default value is 0 1 auto. It means-

flex-glow:0;
flex-shrink:1;
flex=basis: auto;


but I've noticed, in many place flex:1 is used.Is it shorthand for "1 1 auto" or "1 0 auto"?
I can't understand what does it mean? I get nothing searching in googling.

Answer

Here is the explanation:

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

flex: <positive-number>
Equivalent to flex: <positive-number> 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.

Therefore flex:1 it is equivalent to flex: 1 1 0