Flexbox notes

Flexbox is very powerful, yet still not popular enough.

Look at this

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-shrink: 1;

The second one means

flex-shrink: 1;

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)