⌘ K
esc

    Justify Content

    Defines the alignment on the main axis.

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

    Items are positioned at the start of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex justify-content-start flex-wrap card-container blue-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">3</div>
        </div>
    </div>
    
    
    Center

    Items are positioned at the center of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex justify-content-center flex-wrap card-container yellow-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-gray-900 border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-gray-900 border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-gray-900 border-round m-2">3</div>
        </div>
    </div>
    
    
    End

    Items are positioned at the end of the container.

    1
    2
    3
    
    <div class="card">
        <div class="flex justify-content-end flex-wrap card-container green-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-green-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-green-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-green-500 font-bold text-white border-round m-2">3</div>
        </div>
    </div>
    
    
    Space Between

    Items are positioned with spaces between them.

    1
    2
    3
    
    <div class="card">
        <div class="flex justify-content-between flex-wrap card-container purple-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-purple-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-purple-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-purple-500 font-bold text-white border-round m-2">3</div>
        </div>
    </div>
    
    
    Space Around

    Items are positioned with spaces between and around them.

    1
    2
    3
    
    <div class="card">
        <div class="flex justify-content-around flex-wrap card-container indigo-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-indigo-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-indigo-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-indigo-500 font-bold text-white border-round m-2">3</div>
        </div>
    </div>
    
    
    Space Evenly

    Items are positioned with equals spaces around them.

    1
    2
    3
    
    <div class="card">
        <div class="flex justify-content-evenly flex-wrap card-container orange-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-orange-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-orange-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-orange-500 font-bold text-white border-round m-2">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:justify-content-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 md:justify-content-start justify-content-center flex-wrap card-container cyan-container">
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-cyan-500 font-bold text-white border-round m-2">1</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-cyan-500 font-bold text-white border-round m-2">2</div>
            <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-cyan-500 font-bold text-white border-round m-2">3</div>
        </div>
    </div>