⌘ K
esc

    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">
        <div class="flex align-items-stretch flex-wrap card-container blue-container" style="min-height: 200px">
            <div class="flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
            <div class="align-self-auto flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
            <div class="flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
        </div>
    </div>
    
    
    Start

    Item is located at the start of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex align-items-stretch flex-wrap card-container yellow-container" style="min-height: 200px">
            <div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
            <div class="align-self-start flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
            <div class="flex align-items-center justify-content-center bg-yellow-500 font-bold text-gray-900 border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
        </div>
    </div>
    
    
    Center

    Item is located at the center of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex align-items-stretch flex-wrap card-container green-container" style="min-height: 200px">
            <div class="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
            <div class="align-self-center flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
            <div class="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
        </div>
    </div>
    
    
    End

    Item is located at the end of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex align-items-stretch flex-wrap card-container purple-container" style="min-height: 200px">
            <div class="flex align-items-center justify-content-center bg-purple-500 font-bold text-white 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-purple-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
            <div class="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
        </div>
    </div>
    
    
    Stretch

    Items is stretched to fit the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex align-items-stretch flex-wrap card-container indigo-container" style="min-height: 200px">
            <div class="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white 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-indigo-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
            <div class="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
        </div>
    </div>
    
    
    Baseline

    Item is located at the baseline of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex align-items-stretch flex-wrap card-container orange-container" style="min-height: 200px">
            <div class="flex align-items-center justify-content-center bg-orange-500 font-bold text-white 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-orange-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
            <div class="flex align-items-center justify-content-center bg-orange-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
        </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">
        <div class="flex align-items-stretch flex-wrap card-container cyan-container" style="min-height: 200px">
            <div class="md:align-self-auto align-self-center flex align-items-center justify-content-center bg-cyan-500 font-bold text-white 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-cyan-500 font-bold text-white 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-cyan-500 font-bold text-white border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
        </div>
    </div>