Flexible Box Layout 189
Figure 15-4 shows the result.
Figure 15-4: The flex items reordered using ordinal groups
Notice that items #c and #a share the same background colors, as do
#b and #d. The background colors should alternate because I’m using the
:nth-child() pseudo-class discussed in Chapter 4:
.flex-item:nth-child(even) { background-color: gray; }
But remember that the items have only changed order visually; they
retain the same order in the markup, which is why :nth-child() applies the
gray background to the elements that should be even numbered—namely,
#b and #d.
Adding Flexibility
When using Flexbox, you will almost certainly encounter situations where
the combined lengths of flex items along the main axis are greater or less
than the width of the flex container. When this happens, the “flexible” part
of Flexbox comes into play. Several properties allow flex items to grow or
shrink to fill their container. I’ll walk you through them in this section.
The flex-grow Property
Let’s say you have a flex container 600px wide that contains three flex items.
Each one is 150px wide, making a combined width of 450px. The difference
between the width of the container and the combined width of the items
leaves an empty space of 150px (that’s 600 − 450) at the end of the items,
as shown in Figure 15-5.
Figure 15-5: Three flex items with a combined width narrower than the width of their con-
tainer leaves empty space on the right.
