Align Items

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

Align Items start

Class: .items-start

<div class="flex items-start 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 p-1 m-1"><div class="h-10">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 Items end

Class: .items-end

<div class="flex items-end 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 p-1 m-1"><div class="h-10">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 Items center

Class: .items-center

<div class="flex items-center 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 p-1 m-1"><div class="h-10">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 Items stretch

Class: .items-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 p-1 m-1"><div class="h-10">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 Items baseline

Class: .items-baseline

<div class="flex items-baseline 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 p-1 m-1"><div class="h-10">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-items-start
.md-items-start
.lg-items-start
.xl-items-start
.sm-items-end
.md-items-end
.lg-items-end
.xl-items-end
.sm-items-center
.md-items-center
.lg-items-center
.xl-items-center
.sm-items-stretch
.md-items-stretch
.lg-items-stretch
.xl-items-stretch
.sm-items-baseline
.md-items-baseline
.lg-items-baseline
.xl-items-baseline