Defines the alignment for a particular element on the cross axis.
| Class | Properties |
|---|---|
| align-items-stretch | align-items: stretch; |
| 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; |
Derives the value from flex container.
<div class="flex align-items-stretch flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-self-auto justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
Item is located at the start of the container.
<div class="flex align-items-stretch flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-self-start align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
Item is located at the center of the container.
<div class="flex align-items-stretch flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="flex align-self-center align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
Item is located at the end of the container.
<div class="flex align-items-stretch flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="align-self-end flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
Item is stretched to fit the container.
<div class="flex align-items-stretch flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="align-self-stretch flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
Item is located at the baseline of the container.
<div class="flex align-items-stretch flex-wrap" style="min-height: 200px">
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="align-self-baseline flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
<div class="flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:align-self-center to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<div class="flex align-items-stretch flex-wrap" style="min-height: 200px">
<div class="md:align-self-auto align-self-center flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
<div class="md:align-self-auto align-self-center flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
<div class="md:align-self-auto align-self-center flex align-items-center justify-content-center bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>