190 Chapter 15
To expand the items to fill the container, you can use the flex-grow
property:.flex-item { flex-grow: 1; }The value of the flex-grow property is basically a ratio that’s used to dis-
tribute the empty space between the flex items so they expand. In this case,
I used a 1:1:1 ratio to divide the empty 150px equally between the three
flex items. Because 150 divided by 3 is 50, each item is expanded by 50px,
making their total width equal to the width of the container, as shown in
Figure 15-6.Figure 15-6: The three flex items now fill the width of their container.You can also provide different values to adjust the distribution ratio.
For example, to make #b take up more of the width of the container than
the other two items, you could set a value of 3 for #b:#b { flex-grow: 3; }Now the 150px will be redistributed using the ratio 1:3:1, so for every
one pixel distributed to #a and #c, #b will receive three. As a result #a and
#c will each be expanded to 180px wide, whereas #b will be 240px wide as
shown in Figure 15-7.Figure 15-7: Because #b has a higher flex-grow value, when resized, it’s wider than its
siblings.Because the default value for flex-grow is 0 (zero), flex items will keep
their width and not expand to fill the container unless explicitly instructed
to do so.