The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

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 (36) [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.