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 flex justify-content-start flex-wrap">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">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: 100px">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: 100px">3</div>
</div>

Center

Items are positioned at the center of the container.

1
2
3

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

End

Items are positioned at the end of the container.

1
2
3

<div class="card flex justify-content-end flex-wrap">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">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: 100px">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: 100px">3</div>
</div>

Space Between

Items are positioned with spaces between them.

1
2
3

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

Space Around

Items are positioned with spaces between and around them.

1
2
3

<div class="card flex justify-content-around flex-wrap">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">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: 100px">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: 100px">3</div>
</div>

Space Evenly

Items are positioned with equals spaces around them.

1
2
3

<div class="card flex justify-content-evenly flex-wrap">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">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: 100px">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: 100px">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: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 flex md:justify-content-start justify-content-center flex-wrap">
    <div class="font-bold text-blue-500 shadow-1 m-2 flex align-items-center justify-content-center" style="min-width: 200px; min-height: 100px">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: 100px">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: 100px">3</div>
</div>