<h4># justify-content:flex-start;(初期値)</h4>
<div class="d-flex jc-fs">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
  <div class="box-item">3</div>
  <div class="box-item">4</div>
</div><hr>

<h4># justify-content:flex-end;</h4>
<div class="d-flex jc-fe">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
  <div class="box-item">3</div>
  <div class="box-item">4</div>
</div><hr>

<h4># justify-content:center;</h4>
<div class="d-flex jc-c">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
  <div class="box-item">3</div>
  <div class="box-item">4</div>
</div><hr>

<h4># justify-content:space-between;</h4>
<div class="d-flex jc-sb">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
  <div class="box-item">3</div>
  <div class="box-item">4</div>
</div><hr>

<h4># justify-content:space-around;</h4>
<div class="d-flex jc-sa">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
  <div class="box-item">3</div>
  <div class="box-item">4</div>
</div><hr>
*{
  box-sizing:border-box;
}
.d-flex{
  background-color:silver;
  display:-wibkit-flex;
  display:flex;
}
.box-item{
  width:50px;
  height:50px;
  background-color:lime;
  border:solid 1px;
  text-align:center;
  padding:12.5px;
  margin:5px;
}

.jc-fs{
  justify-content:flex-start;/* 初期値 */
}
.jc-fe{
  justify-content:flex-end;
}
.jc-c{
  justify-content:center;
}
.jc-sb{
  justify-content:space-between;
}
.jc-sa{
  justify-content:space-around;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.