390885 (23) [Avatar] Offline
#1
In the section about flex-basis, I thought the effect of flex-basis: 0% is similar with flex-basis: auto or no effect like 0 in flex-grow and flex-shrink.
So after I edit CSS and add this snippet:
flex-grow: 2;
flex-shrink: 0;
flex-basis: 0%;


I thought flex-shrink: 0 doesn't work at all because flex items look like they are "shrinking".
After fiddling with flex-basis: 0, I noticed that it will cause the width of flex items as narrow as possible.
So, in this case, flex-shrink even has no opportunity to do any thing about shrink.
The auto adjusting according to the width of viewport is all done by flex-grow property.

In case others would have same confusion as I did, it maybe better to add some details about flex-basis: 0 I think.
390885 (23) [Avatar] Offline
#2
By the way, page 125,
flex: 2 is equivalent to
flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%


not
flex-grow: 2;
flex-shrink: 0;
flex-basis: 0%


This should be consistent with the tip on page 127
Keith J Grant (27) [Avatar] Offline
#3
Yeah, I could probably be a little more clear about what flex-basis 0% is doing there. In short: this sets the "initial main size" to zero, before flex-grow and flex-shrink are taken into account.

Good catch on the `flex-shrink: 1`. I'll update that.