Align Self

Defines the alignment for a particular element on the cross axis.

Controls
Class Properties
align-self-auto align-self: auto;
align-self-start align-self: flex-start;
align-self-center align-self: center;
align-self-end align-self: flex-end;
align-self-stretch align-self: stretch;
align-self-baseline align-self: baseline;
Auto

Derives the value from flex 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="align-self-auto 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

Item is located at the start of 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="align-self-start 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>

Center

Item is located at the center of 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="align-self-center 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>

End

Item is located at the end of 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="align-self-end 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>

Stretch

Items is 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="align-self-stretch 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>

Baseline

Item is located at the baseline of 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="align-self-baseline 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>

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

<div class="card flex align-items-stretch flex-wrap" style="min-height: 200px">
    <div class="md:align-self-auto align-self-center 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="md:align-self-auto align-self-center 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="md:align-self-auto align-self-center 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>