As we all know, the flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties. Its default value is 0 1 auto, which means
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
but I've noticed, in many places flex: 1 is used. Is it shorthand for 1 1 auto or 1 0 auto? I can't understand what it means and I get nothing when I google.
9 Answers
flex: 1 means the following:
flex-grow : 1; ➜ The div will grow in same proportion as the window-size
flex-shrink : 1; ➜ The div will shrink in same proportion as the window-size
flex-basis : 0; ➜ The div does not have a starting value as such and will
take up screen as per the screen size available for
e.g:- if 3 divs are in the wrapper then each div will take 33%.
Here is the explanation:
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 is equivalent to flex: 1 1 0
BE CAREFUL
In some browsers:
flex:1; does not equal flex:1 1 0;
flex:1; = flex:1 1 0n; (where n is a length unit).
- flex-grow: A number specifying how much the item will grow relative to the rest of the flexible items.
- flex-shrink A number specifying how much the item will shrink relative to the rest of the flexible items
- flex-basis The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit.
The key point here is that flex-basis requires a length unit.
In Chrome for example flex:1 and flex:1 1 0 produce different results. In most circumstances it may appear that flex:1 1 0; is working but let's examine what really happens:
