Align Items

Defines the alignment on the cross axis.

Controls
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;
Stretch

Items are stretched to fit the container.

1
2
3

<div class="card flex align-items-stretch flex-wrap" style="min-height: 200px">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">1</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">2</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">3</div>
</div>

Start

Items are located at the start of the container.

1
2
3

<div class="card flex align-items-start flex-wrap" style="min-height: 200px">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">1</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 150px">2</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">3</div>
</div>

Center

Items are located at the center of the container.

1
2
3

<div class="card flex align-items-center flex-wrap" style="min-height: 200px">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">1</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 150px">2</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">3</div>
</div>

End

Items are located at the end of the container.

1
2
3

<div class="card flex align-items-end flex-wrap" style="min-height: 200px">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">1</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 150px">2</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">3</div>
</div>

Baseline

Items are located at the baseline of the container.

1
2
3

<div class="card flex align-items-baseline flex-wrap" style="min-height: 200px">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">1</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 150px">2</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">3</div>
</div>

Responsive

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-items-center to use a responsive class.

  • sm: small screens e.g. phones
  • md: medium screens e.g. tablets
  • lg: large screens e.g. notebooks
  • xl: larger screens .e.g monitors
1
2

<div class="card flex md:align-items-center align-items-stretch flex-wrap" style="min-height: 200px">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">1</div>
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">2</div>
</div>