CSS - justify-content

Quiz

Description

The justify-content property used to control the alignment of flex items along the main axis of a flex container.

It determines how extra space is distributed between and around the flex items.

Possible Values

flex-start
flex-end
center
space-between
space-around
space-evenly

Applies to

All the HTML elements.

DOM Syntax

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;

Justify Content Start

flex-start value aligns flex items along the main axis, placing them at the beginning of the container without any extra space between or around them - as demonstrated in the following example:

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: flex-start;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

Justify Content End

When you set justify-content to flex-end, the flex items will align to the end of the flex container - as demonstrated in the following example:

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: flex-end;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

Justify Content Center

justify-content: center property, its aligns flex items along the main axis, centering them within the container horizontally - as demonstrated in the following example:

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: center;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

Justify Content Space Between

The justify-content: space-between property evenly distribute flex items along the main axis, leaving equal space between adjacent items, but no space at the edges of the container - as demonstrated in the following example:

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-between;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

Justify Content Space Around

We can set the property justify-content to the value space-around that evenly distributes space around flex items along the main axis, creating equal gaps between adjacent items and at the container's edges - as demonstrated in the following example:

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-around;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

Justify Content Space Evenly

The justify-content: space-evenly property evenly distributes space between flex items along the main axis, including both the outer edges and spaces between items, resulting in equal spacing between all items - as demonstrated in the following example:

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-evenly;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

Print Page