`align-content` arranges multiple flex lines along a container’s cross axis. Think of a wrapped flex container as having several shelves of items: this property moves or spaces the shelves, not the items sitting on each shelf. For a horizontal main axis, the cross axis runs vertically. section 12.2
It matters when items wrap into multiple rows or columns. `align-items` handles items within a line; `align-content` handles the collection of lines. If there is only one line, there is no stack of shelves to arrange—no tiny layout drama for `align-content` to solve. section 12.2 section 12.7
container {
display: flex;
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly;
}
Set the container to `display: flex`, allow wrapping when needed, then choose how its lines use cross-axis space. section 12.2
Choose a value based on where the wrapped lines should go:
- `stretch` expands lines along the cross axis to fill the container. It is the default, so writing it is optional. section 12.2
- `flex-start`, `center`, and `flex-end` place the lines at the start, middle, or end of the cross axis. section 12.2
- `space-between` puts the first line at the start and the last at the end, distributing the rest between them. section 12.2
- `space-around` gives each line surrounding space, leaving half-size space at the outer edges. section 12.2
- `space-evenly` gives every line the same space before and after it. section 12.2
A quick way to remember the name: `align` means position, and `content` means the whole batch of wrapped lines. It is a container property, so place it on the flex container rather than on an individual flex item. section 12.2 section 12.7
Keep gallery thumbnails at the top
A photo gallery’s `main` element wraps thumbnails and grows to fill empty vertical page space. That extra height can create unwanted gaps between thumbnail rows. `align-content: flex-start` keeps all wrapped thumbnail lines gathered at the top while `flex-grow: 1` still lets `main` fill the available space. section 15.7 section 15.7
main {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start; #1
flex-grow: 1; #1
max-width: 960px;
font-family: Optima, Calibri, sans-serif;
}
footer {
display: flex; #2
justify-content: center; #2
align-items: center; #2
width: 100%; #3
padding: 1em 0;
text-transform: uppercase;
background-color: #543437;
}
footer p {
padding: 0 1.5em;
}
This gallery rule combines wrapping, `flex-grow`, and `align-content: flex-start` to prevent extra vertical spacing between thumbnail lines. section 15.7
PLAY: give a flex container a fixed height, turn on `flex-wrap: wrap`, and add enough items to create several lines. Switch among `center`, `space-between`, and `flex-start`; the visible changes happen between lines along the cross axis. section 12.2 section 12.2
REMEMBER: `align-content` answers “How should multiple lines be arranged along the cross axis?” For one item’s position within a line, reach for `align-items` instead. section 12.7 section 12.2
