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 |
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>
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>
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>
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>
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>
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
|