The align-content property aligns the contents within the box along the block/cross axis. Applies to block, multicol, flex, and grid containers. In flex with flex-wrap: nowrap — has no effect..container {
align-content: center;
}.grid {
display: grid;
align-content: space-between;
}normalDefault — behaves as start in block, stretch in multicol/grid.startAligns to the start edge.endAligns to the end edge.centerCenters.stretchStretches auto-sized items to fill the container.space-betweenDistributes evenly with first at start and last at end.space-aroundDistributes evenly with half-space at edges.space-evenlyDistributes evenly with full space at edges as well.baselineComputes to first baseline.first baselineAligns to first baseline.last baselineAligns to last baseline.flex-start(flex) Aligns to main-start/cross-start.flex-end(flex) Aligns to main-end/cross-end.safeOverflow modifier: if overflowing, behaves as start.unsafeOverflow modifier: honors alignment even if it causes overflow.CSS Box Alignment Module Level 3Editor's DraftW3CMDNCSSCSSCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
