Align Content

Controls the distribution of flex lines between and around items.

Classes#

ClassProperties
align-content-startalign-content: flex-start;
align-content-endalign-content: flex-end;
align-content-centeralign-content: center;
align-content-betweenalign-content: space-between;
align-content-aroundalign-content: space-around;
align-content-evenlyalign-content: space-evenly;

Start#

Flex lines are distributed at the start of the container.

1
2
3
<div class="flex align-content-start flex-wrap" style="min-height: 200px">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>
 

Center#

Flex lines are distributed at the center of the container.

1
2
3
<div class="flex align-content-center flex-wrap" style="min-height: 200px">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>
 

End#

Flex lines are distributed at the end of the container.

1
2
3
<div class="flex align-content-end flex-wrap" style="min-height: 200px">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>
 

Space Between#

Flex lines are distributed evenly.

1
2
3
4
5
<div class="flex align-content-between flex-wrap"  style="min-height: 320px; max-width: 700px">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
 

Space Around#

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

1
2
3
4
5
<div class="flex align-content-around flex-wrap"  style="min-height: 320px; max-width: 700px">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">3</div>
</div>
 

Space Evenly#

Flex lines are distributed evenly with equal space around them.

1
2
3
4
5
<div class="flex align-content-evenly flex-wrap"  style="min-height: 320px; max-width: 700px">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" style="min-width: 200px; min-height: 50px">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2" 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-content-start to use a responsive class.

ClassDescription
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="flex  md:align-content-start align-content-center flex-wrap">
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">1</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">2</div>
    <div class="flex align-items-center justify-content-center w-4rem h-4rem bg-primary font-bold border-round m-2">3</div>
</div>
 
                  PrimeFlex 3.3.1 by PrimeTek