Flexbox & Grid

align-content

Distribute flex lines on the cross axis or grid tracks on the block axis.

Class	Declarations
`content-normal`	`align-content: normal;`
`content-baseline`	`align-content: baseline;`
`content-center`	`align-content: center;`
`content-stretch`	`align-content: stretch;`
`content-start`	`align-content: start;`
`content-end`	`align-content: end;`
`content-flex-start`	`align-content: flex-start;`
`content-flex-end`	`align-content: flex-end;`
`content-around`	`align-content: space-around;`
`content-between`	`align-content: space-between;`
`content-evenly`	`align-content: space-evenly;`
`align-content:<value>`	`align-content: <value>;`

Use content-between to put the first and last flex lines against opposite cross-axis edges, distributing the remaining space between them. Four 120px-wide items form two lines in this 280px row. Its 224px height leaves room beyond the two 48px lines and their gap.

Distribute wrapped flex lines

The container has room beyond the authored lines or tracks. Alignment distributes that remaining space; it does not change the fixed item heights.

<div id="layout" class="flex flex-wrap content-between gap-md h:14rem w:17.5rem max-w:100%">  <div id="target" class="flex:none h:3rem w:7.5rem p-sm">01</div>  <div id="peer" class="flex:none h:3rem w:7.5rem p-sm">02</div>  <div id="item-3" class="flex:none h:3rem w:7.5rem p-sm">03</div>  <div id="item-4" class="flex:none h:3rem w:7.5rem p-sm">04</div></div>

Generated CSS

@layer utilities {  .content-between {    align-content: space-between  }  .flex {    display: flex  }  .flex-wrap {    flex-wrap: wrap  }}

In Flexbox, align-content positions lines along the cross axis. In Grid, it positions tracks along the block axis. With horizontal writing and a row flex direction, both axes run vertically.

Center lines or grid tracks

content-center packs the lines or tracks together, then centers the group. These examples both use two 48px rows, a 16px gap and a 224px container height, leaving 56px above and below the group.

Center lines or grid tracks

The container has room beyond the authored lines or tracks. Alignment distributes that remaining space; it does not change the fixed item heights.

<div id="layout" class="flex flex-wrap content-center gap-md h:14rem w:17.5rem max-w:100%">  <div id="target" class="flex:none h:3rem w:7.5rem p-sm">01</div>  <div id="peer" class="flex:none h:3rem w:7.5rem p-sm">02</div>  <div id="item-3" class="flex:none h:3rem w:7.5rem p-sm">03</div>  <div id="item-4" class="flex:none h:3rem w:7.5rem p-sm">04</div></div>

<div id="layout" class="grid grid-cols:2 grid-template-rows:3rem|3rem content-center gap-md h:14rem w:17.5rem max-w:100%">  <div id="target" class="p-sm">01</div>  <div id="peer" class="p-sm">02</div>  <div id="item-3" class="p-sm">03</div>  <div id="item-4" class="p-sm">04</div></div>

align-content has no effect on a flex-nowrap container. A flex-wrap container can use it even when its items happen to fit on one line. Use align-items to align individual items within their line or grid area.

Apply conditionally

Use conditional queries to change alignment at a real viewport width. The wrapped lines start at the top by default and move to opposite edges from sm. The container stays 280px wide so the number of lines stays the same while you resize the preview.

Apply conditionally

The container has room beyond the authored lines or tracks. Alignment distributes that remaining space; it does not change the fixed item heights.

<div id="layout" class="flex flex-wrap content-start gap-md h:14rem w:17.5rem max-w:100% content-between@sm">  <div id="target" class="flex:none h:3rem w:7.5rem p-sm">01</div>  <div id="peer" class="flex:none h:3rem w:7.5rem p-sm">02</div>  <div id="item-3" class="flex:none h:3rem w:7.5rem p-sm">03</div>  <div id="item-4" class="flex:none h:3rem w:7.5rem p-sm">04</div></div>