192 Chapter 15
When flex-basis is applied, any existing width value is ignored, and the
value that you specify for the flex-basis is used to calculate the adjustment.
For example, in the previous two sections, the width value of 150px is ignored
and all growth or shrinking is based on the flex-basis value of 100px. You
could add the flex-basis value of 100px to #b in Figure 15-7, like this:.child-item {
flex-grow: 1;
width: 150px;
}
#b {
flex-basis: 100px;
flex-grow: 3;
}Now the empty space in the container will be redistributed using the
ratio 1:3:1, which means that, based on the width values, #a and #c would
expand by 30px each and #b by 90px. Because of the flex-basis value, how-
ever, that space distribution is performed as if #b had a width of 100px, not
the specified width value of 150px.
At first, it seems illogical that #b ends up wider than its siblings despite
having a lower width set by its flex-basis value. The reason is that there is now
a spare width of 200px (the combined widths of the flex items is 400px; the
parent is 600px). This 200 is redistributed between the three boxes using the
ratio 1:3:1. Although #b begins at 100px wide, it receives 120px of the spare
space whereas #a and #c receive 40px.
As a result, #a and #c end up 190px wide, and #b is 220px wide. Compare
the result shown in Figure 15-9 with Figure 15-7 to see the difference.Figure 15-9: Because #b has a flex-basis value applied, it’s resized to be larger
than its siblings.The flex Shorthand
As with many properties, the flex-* family has a shorthand property called
flex. The values it takes are, in order, flex-grow, flex-shrink, and flex-basis.
Consider this example:E { flex: 1 2 150px; }