Layout
align-content
align-content sets where the wrapped lines of a flexbox, or the rows of a grid, sit as a group along the cross axis (vertically when items run across) and how leftover space is shared.
Syntax
normal | <baseline-position> | <content-distribution>
| <overflow-position>? <content-position>Preview
1234
Presets
Sample
Drag the bottom-right corner to resize
Code
.box {
display: flex;
flex-wrap: wrap;
align-content: center;
}Controls
align-contentcenter
safe / unsafeOnly matters when items overflow the box (they do not in this preview)
1234
About
Values
normal: the initial value. In a flexbox it is the same asstretch.stretch: stretches the lines to fill the leftover space. Withalign-items: stretch, the items stretch with their lines.flex-start,flex-end,center: packs the lines toward the start (top), the end (bottom) or the middle.space-between,space-around,space-evenly: shares the leftover space between lines, the same way asjustify-content.start,end: packs the lines toward the end given by the text direction. They do not swap withflex-wrap: wrap-reverse.baseline,last baseline: line up the baselines of the content of boxes sitting side by side, such as table cells. A single box like this preview does not change.last baselinedoes not work in Chrome and Edge yet.
The preview on this page sets display: flex and flex-wrap: wrap as helper declarations, wrapping the items into two lines of three and one.
When it applies
- In a flexbox it only works with two or more lines. A single line (
flex-wrap: nowrap) is not affected. - Nothing changes when the box has no spare height (its height fits the content).
- It also works on
display: blockboxes (Chrome and Edge 123, Firefox 125, Safari 17.4 and later).align-content: centercenters a block's whole content vertically.
safe and unsafe
Put safe before a position keyword and, when the lines overflow the box, they are packed to start instead, so the overflow never hides on the side you cannot see (the top). unsafe keeps the requested position even when they overflow. The lines in this preview never overflow, so neither keyword changes what you see.