What is justify-content?

How to use justify-content Property?

justify-content is the property of the flexbox. justify-content and align-items is a similar functionality both are the aligning property. justify-content align to flexible items in the horizontal OR x-axis.

The default value of the justify-content is the flex-start.

justify-content have following value:

justify-content:flex-start;

justify-content:center;

justify-content:flex-end;

justify-content:space-between;

justify-content:space-around;

justify-content:initial;

justify-content:inherit;

Here is the justify-content example:

<style>

.flexContainer {

  display: flex;

  border:1px solid #ccc;

  justify-content: flex-start;

  width: 600px;

}

.flexContainer .innerElement  {

  background: #0bf;

  text-align: center;

  font-size: 20px;

  padding: 10px;

  margin: 5px;

  font-size:16px;

  color: #fff;

  width: 50px;

}

</style>

<div class="flexContainer">

  <h1 class="innerElement">1 justify-content </h1>

  <div class="innerElement">2justify-content

    <div class="abc">justify-content Inner</div>

  </div>

  <span class="innerElement">3 justify-content</span>

  <strong class="innerElement">4 justify-content</strong>

</div>

justify-content: flex-start;

justify-content: center;

justify-content: flex-end;

justify-content: space-around;

justify-content: space-between;