Flexbox notes

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)

Advertisements
Standard