Align self

Syntax

Class
Properties
align-self-auto
align-self: auto;
align-self-start
align-self: flex-start;
align-self-center
align-self: center;
align-self-end
align-self: flex-end;
align-self-stretch
align-self: 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-red mr-8 align-self-start"></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-self-auto
t1 align-self-auto
.t1.align-self-auto { align-self: auto; }
align-self-start
t1 align-self-start
.t1.align-self-start { align-self: flex-start; }
align-self-center
t1 align-self-center
.t1.align-self-center { align-self: center; }
align-self-end
t1 align-self-end
.t1.align-self-end { align-self: flex-end; }
align-self-stretch
t1 align-self-stretch
.t1.align-self-stretch { align-self: stretch; }