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 flex align-content-start 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="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

Flex lines are distributed at the center of the container.

1
2
3

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

Flex lines are distributed at the end of the container.

1
2
3

<div class="card flex align-content-end 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="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>

Space Between

Flex lines are distributed evenly.

1
2
3
4
5
6

<div class="card flex align-content-between flex-wrap" style="min-height: 200px; max-width: 700px">
    <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="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 class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 50px">4</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">5</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">6</div>
</div>

Space Around

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

1
2
3

<div class="card flex align-content-around 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="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>

Space Evenly

Flex lines are distributed evenly with equal space around them.

1
2
3

<div class="card flex align-content-evenly 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="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-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 flex md:align-content-start align-content-center 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="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>