Flex grow, shrink, basis
3 flex items with flex-basis:33.333%;
3 flex items with flex-basis:20%;
3 flex items with flex-basis:20%;
b1 has flex-grow:2; and the others have flex-grow:1;
I've grown by twice as much as the others:
by 20% to 40%
We've grown by half as much as b1..
..by 10% to 30% each
3 flex items with flex-basis:20%;
c1 has flex-grow:1; c2 has flex-grow:3; and c3 has flex-grow:0;
Of the 4
flex-grow portionsI've grown by 1 portion:
by 10% to 30%
Of the 4
flex-grow portionsI've grown by 3 portions:
by 30% to 50%
I haven't grown at all :(
Still 20%
Shrink (with nowrap - default)
3 flex items with flex-basis:50%;
3 flex items with flex-basis:50%;
d1 has flex-shrink:3; and the others have flex-shrink:1;
I've shrunk by 3 times as much as the others
- by 30% to 20%
We've shrunk by 3 times less than d1
- by 10% to 40%
Basis 0 vs. Basis Auto:
3 flex items with flex-basis:0;
e1 has flex-grow:2; and the others have flex-grow:1;
The same as having no written flex-basis setting, and e1 having "flex:2;" and the others having "flex:1;"
(flex:2; = flex-grow:2; flex-shrink:1; flex-basis:0;)
The boxes are shared in a ratio of 2:1
3 flex items with flex-basis:auto;
f1 has flex-grow:2; and the others have flex-grow:1;
Which means that the basis is the content, and the remaining space! is shared in a ratio of 2:1
Flex-basis:auto; is default, if you don't use "flex:.." alone.
Menu example:
Menu items with flex:1;
Meaning equal width: same as flex-grow:1; flex-shrink:1; flex-basis:0;
Menu items with flex-grow:1;
Meaning equal available space: same as flex-grow:1; flex-shrink:1; flex-basis:auto;