Flexible Box Layout 193
Here, element E has a flex-grow value of 1 and a flex-shrink value of 2.
The value used is chosen based on the width of the flex items in compari-
son with their flex container; where flex items don’t fill their container, the
flex-grow value is used, and where flex items exceed their container, the
flex-shrink value comes into play. The final value, 150px, is the flex-basis
value.
Alignment Inside the Container
When you have items with fixed dimensions inside a flex container, you’ll
likely have empty space along one or both of the axes. For example, in
Figure 15-5, three flex items that are each 150px wide didn’t fill the width
of their 600px container. When this is the case, you can align the items
inside the container to make better use of the available space.
Horizontal Alignment with justify-content
Thankfully, Flexbox offers tight control over alignment and placement,
allowing you to redistribute unused space with the justify-content property.
This property is applied to the flex container and accepts a series of key-
word values that are applied differently depending on the direction of the
flex parent (row, column, reversed row, and so on):
.flex-container { justify-content: keyword; }
The default value is flex-start, which (as shown in Figure 15-5) aligns
all flex items to the left of the parent with the unused space occupying the
remaining width to the right. The alternative values are the following:
• flex-end, which aligns items to the right of the container with the
unused space to the left
• center, which distributes the unused space to either side of all items,
centering the items in the container
• space-between, which adds an equal amount of space between each item
but none before the first or after the last item
• space-around, which puts an equal amount of space on both sides of
each item
The following code shows a few different values for the sake of compari-
son, with the results shown in Figure 15-10.
.container-a { justify-content: flex-start; }
.container-b { justify-content: center; }
.container-c { justify-content: space-around; }
