Flexbox is very powerful, yet still not popular enough.
Look at this
flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.
Guess what does this mean?
– flex: 1 auto;
How about this
– flex: 2 0px;
The first one means
flex-grow:1;
flex-shrink: 1;
flex-basis:auto;
The second one means
flex-grow:2;
flex-shrink: 1;
flex-basis:0px;
Is auto the same as 0px? No.
StackOverflow says “flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.”
But why would a box’s final size depends on its starting size though? I thought that was the whole point of having flex-grow… Need to meditate on this one…
Maybe because of this ‘flex-basis establishes the base width of the element prior to redistributing remaining space along the (main?) axis, either by justify-content or flex-grow/shrink values’. (also from StackOverflow)