Align Self

Example class
block 1
block 2
block 3
 .self-start
block 1
block 2
block 3
 .self-end
block 1
block 2
block 3
 .self-center
block 1
block 2
block 3
 .self-stretch
block 1
block 2
block 3
 .self-baseline

Align Self start

Class: .self-start

<div class="flex items-stretch bg-gray-light h-l5">
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 1</div></div>
    <div class="white bg-blue self-start p-1 m-1"><div class="h-8">block 2</div></div>
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 3</div></div>
</div>
block 1
block 2
block 3

Align Self end

Class: .self-end

<div class="flex items-stretch bg-gray-light h-l5">
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 1</div></div>
    <div class="white bg-blue self-end p-1 m-1"><div class="h-8">block 2</div></div>
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 3</div></div>
</div>
block 1
block 2
block 3

Align Self center

Class: .self-center

<div class="flex items-stretch bg-gray-light h-l5">
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 1</div></div>
    <div class="white bg-blue self-center p-1 m-1"><div class="h-8">block 2</div></div>
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 3</div></div>
</div>
block 1
block 2
block 3

Align Self stretch

Class: .self-stretch

<div class="flex items-stretch bg-gray-light h-l5">
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 1</div></div>
    <div class="white bg-blue self-stretch p-1 m-1"><div class="h-8">block 2</div></div>
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 3</div></div>
</div>
block 1
block 2
block 3

Align Self baseline

Class: .self-baseline

<div class="flex items-stretch bg-gray-light h-l5">
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 1</div></div>
    <div class="white bg-blue self-baseline p-1 m-1"><div class="h-8">block 2</div></div>
    <div class="white bg-blue p-1 m-1"><div class="h-8">block 3</div></div>
</div>
block 1
block 2
block 3
Responsive variants
.sm-self-start
.md-self-start
.lg-self-start
.xl-self-start
.sm-self-end
.md-self-end
.lg-self-end
.xl-self-end
.sm-self-center
.md-self-center
.lg-self-center
.xl-self-center
.sm-self-stretch
.md-self-stretch
.lg-self-stretch
.xl-self-stretch
.sm-self-baseline
.md-self-baseline
.lg-self-baseline
.xl-self-baseline