Align items

Syntax

Class
Properties
align-items-start
align-items: flex-start;
align-items-center
align-items: center;
align-items-end
align-items: flex-end;
align-items-baseline
align-items: baseline;
align-items-stretch
align-items: stretch;
<div class="t1 flex justify-content-center align-items-center 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.
align-items-start
t1 align-items-start
.t1.align-items-start { align-items: flex-start; }
align-items-center
t1 align-items-center
.t1.align-items-center { align-items: center; }
align-items-end
t1 align-items-end
.t1.align-items-end { align-items: flex-end; }
align-items-baseline
t1 align-items-baseline
.t1.align-items-baseline { align-items: baseline; }
align-items-stretch
t1 align-items-stretch
.t1.align-items-stretch { align-items: stretch; }