The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

194 Chapter 15

Figure 15-10: Different values for the justify-content property: flex-start (top),

center (middle), and space-around (bottom)

Vertical Alignment with align-items

When the height of your flex items is less than the height of the flex con-

tainer, you can use the property align-items to adjust the items within the

container:

.flex-container { align-items: keyword; }

The principal keyword values for this property are:

•    stretch, which makes items the same height as the parent

•    flex-start, which aligns items to the top of the container

•    flex-end, which aligns items to the bottom of the container

•    center, which aligns items to the vertical center of the container, with

equal space above and below

The default value is stretch if the items have no height explicitly speci-

fied, or flex-start if they do.

In the following listing, I’ve set the flex container to have a flex-direction

value of column, so the main axis is vertical and the cross axis is horizontal.

Figure 15-11 shows the results.

.container-a { align-items: stretch; }

.container-b { align-items: flex-end; }

.container-c { align-items: center; }