Align content

Syntax

Class
Properties
align-content-start
align-content: flex-start;
align-content-center
align-content: center;
align-content-end
align-content: flex-end;
align-content-between
align-content: space-between;
align-content-around
align-content: space-around;
align-content-evenly
align-content: space-evenly;
<div class="t1 flex flex-wrap align-content-center w-320 h-192 p-4 bg-c-white shadow-4"> <div class="t1 w-148 min-h-48 bg-c-blue m-4"></div> <div class="t1 w-148 min-h-48 bg-c-blue m-4"></div> <div class="t1 w-148 min-h-48 bg-c-blue m-4"></div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Place rows at the start.
t1 align-content-start
.t1.align-content-start { align-content: flex-start; }
Place rows at the center.
t1 align-content-center
.t1.align-content-center { align-content: center; }
Place rows at the end.
t1 align-content-end
.t1.align-content-end { align-content: flex-end; }
Distribute space between the rows.
t1 align-content-between
.t1.align-content-between { align-content: space-between; }
Distribute space around the rows.
t1 align-content-around
.t1.align-content-around { align-content: space-around; }
Distribute space evenly around and between the rows.
t1 align-content-evenly
.t1.align-content-evenly { align-content: space-evenly; }