The **`justify-content` property** aligns the entities in the containers when they do not utilize all available space on the horizontal axis. It is a sub-property of Flexible Box Layout. There are multiple values for this property, as shown below.

The syntax is as follows:

```css
justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit;

.container{
        display: flex;
        justify-content: flex-start;
}

```

Let's look at the examples for each of these.

> Note: For the demo presented below, you can see and play around with the HTML and CSS code by clicking on the respective tabs.

<html>
 <head>
 </head>
 <body>
   <h4>container with mentioning flex-start.</h4>
   <div class="container">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
   </div>
   <hr>
   <h4>container without mentioning flex-start(default value).</h4>
   <div class="container2">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
   </div>
   <hr>
   <h4>container with flex-end.</h4>
   <div class="container3">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
   </div>
   <hr>
   <h4>container with center.</h4>
   <div class="container4">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
   </div>
   <hr>
   <h4>container with space-between.</h4>
   <div class="container5">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
   </div>
   <hr>
   <h4>container with space-around.</h4>
   <div class="container6">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
   </div>
   <hr>
   <h4>container with space-evenly.</h4>
   <div class="container7">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
   </div>
   <hr>
   <h4>container with initial.</h4>
   <div class="container8">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
   </div>
 </body>
</html>

// document.addEventListener("DOMContentLoaded", function () {
//   pTag = document.querySelector("div");
//   newVal = document.createElement("p");
//   newVal.innerHTML = 'Hello, Hello';
//   pTag.appendChild(newVal);
// });

// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

body{

    #box1{
        height: 80px;
        width: 80px;
        margin: 0px;
        background-color: rgb(243, 77, 77);
        }

    #box2{
        height: 80px;
        width: 80px;
        margin: 0px;
        background-color: rebeccapurple;
        }

    #box3{
        height: 80px;
        width: 80px;
        margin: 0px;
        background-color: yellowgreen;
        }
    
}

body{
.container{
        display: flex;
        justify-content: flex-start;
        margin: 5px;
    }

.container2{
        display: flex;
        // justify-content: flex-start;
    }
.container3{
        display: flex;
        justify-content: flex-end;
        margin: 5px;
    }

.container4{
        display: flex;
        justify-content: center;
        margin: 5px;
    }

.container5{
        display: flex;
        justify-content: space-between;
        margin: 5px;
    }

.container6{
        display: flex;
        justify-content: space-around;
        margin: 5px;
    }

.container7{
        display: flex;
        justify-content: space-evenly;
        margin: 5px;
    }

.container8{
        display: flex;
        justify-content: initial;
        margin: 5px;
    }
}

codemirror

#    
## Explanation

Consider a container and three `div`s within it. Each has a height and width of `80px`. We present this container as `flex` using the `display` property, i.e., `display: flex` and change the `justify-content` property values.

1. `flex-start`: The container adjusts the items to their start (left). The `justify-content` property takes this by default, when the value is not specified.

2. `flex-end`: Here, items are arranged to the end (right) of the container.

3. `center`: Aligns all the blocks to the center of the container.

4. `space-between`: The blocks will have space between them. 

5. `space-around`: This is similar to the `space-between`, but some space will separate the rightmost block from the end of the container and the leftmost block from the beginning of the container.

6. `space-evenly`: It will place all the blocks with equal spaces towards the left and right.

7. `initial`: This will set the property's default value i.e., `flex-start`.

8. `inherit`: This is used when you want the same property as the parent container.


What is the CSS justify-content Property?

Aligns items in a container horizontally with values like flex-start, flex-end, center, space-between, space-around, space-evenly, initial, inherit.