Justify content

Syntax

Class
Properties
justify-content-start
justify-content: flex-start;
justify-content-center
justify-content: center;
justify-content-end
justify-content: flex-end;
justify-content-between
justify-content: space-between;
justify-content-around
justify-content: space-around;
justify-content-evenly
justify-content: space-evenly;
<div class="t1 flex justify-content-start w-320 h-128 bg-c-white shadow-4"> <div class="t1 w-16 min-h-24 bg-c-blue mr-8"></div> <div class="t1 w-16 min-h-48 bg-c-blue mr-8"></div> <div class="t1 w-16 min-h-36 bg-c-blue"></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 items at the start.
t1 justify-content-start
.t1.justify-content-start { justify-content: flex-start; }
Place items at the center.
t1 justify-content-center
.t1.justify-content-center { justify-content: center; }
Place items at the end.
t1 justify-content-end
.t1.justify-content-end { justify-content: flex-end; }
Distribute space between the items.
t1 justify-content-between
.t1.justify-content-between { justify-content: space-between; }
Distribute space around the items.
t1 justify-content-around
.t1.justify-content-around { justify-content: space-around; }
Distribute space evenly around and between the items.
t1 justify-content-evenly
.t1.justify-content-evenly { justify-content: space-evenly; }