⌘ K
esc

    Align Content

    Controls the distribution of flex lines between and around items.

    Classes
    Class Properties
    align-content-start align-content: flex-start;
    align-content-end align-content: flex-end;
    align-content-center align-content: center;
    align-content-between align-content: space-between;
    align-content-around align-content: space-around;
    align-content-evenly align-content: space-evenly;
    Start

    Flex lines are distributed at the start of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex align-content-start 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="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>
    
    
    Center

    Flex lines are distributed at the center of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex align-content-center 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="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>
    
    
    End

    Flex lines are distributed at the end of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex align-content-end 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="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>
    
    
    Space Between

    Flex lines are distributed evenly.

    1
    2
    3
    4
    5
    
    <div class="card">
        <div class="flex align-content-between flex-wrap card-container purple-container" style="min-height: 320px; max-width: 700px">
            <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="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 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">4</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">5</div>
        </div>
    </div>
    
    
    Space Around

    Flex lines are distributed evenly with half size spaces on both ends.

    1
    2
    3
    4
    5
    
    <div class="card">
        <div class="flex align-content-around flex-wrap card-container indigo-container" style="min-height: 320px; max-width: 700px">
            <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="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 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">4</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">5</div>
        </div>
    </div>
    
    
    Space Evenly

    Flex lines are distributed evenly with equal space around them.

    1
    2
    3
    4
    5
    
    <div class="card">
        <div class="flex align-content-evenly 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="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-content-start 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 md:align-content-start align-content-center flex-wrap card-container cyan-container" style="min-height: 200px">
            <div class="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="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="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>