When a flex container wraps its items into more than one row or column, align-content decides where those whole lines sit on the cross axis. Think of each line as a shelf: this property moves or spaces the shelves, rather than moving the items on a shelf. section 12.2
It is a container property. align-items handles individual items along the cross axis; align-content handles the collection of wrapped lines. If there is only one line, there are no multiple lines to arrange. section 12.18 section 12.2
container {
display: flex;
align-content: stretch|center|flex-start|flex-end|space-between|space-around;
}
Use align-content on a flex container, choosing one of six values for its wrapped lines. section 12.2
Choose a value based on the layout you want:
- stretch is the default and expands wrapped lines along the cross axis to fill the container height. section 12.2
- center places the lines in the middle; flex-start and flex-end place them at the beginning or end of the cross axis. section 12.2
- space-between puts the first and last lines at opposite ends and distributes the remaining lines evenly between them. section 12.2
- space-around gives each line space on both sides, leaving one unit at the outer edges and two units between neighboring lines. section 12.2
A quick layout experiment
Make a flex container, allow its items to wrap, and try changing align-content from center to space-between. Watch the rows move as groups along the cross axis. Then try stretch and notice that writing align-content: stretch is optional because it is already the default. section 12.2 section 12.2
A useful check: are you arranging items, or are you arranging rows or columns of items? Pick align-items for the first job and align-content for the second. section 12.18 section 12.2
