<h3>1. flex-start</h3>
<div class="container one">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>

<h3>2. flex-end</h3>
<div class="container two">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>

<h3>3. center</h3>
<div class="container three">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>

<h3>4. space-between</h3>
<div class="container four">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>

<h3>5. space-around</h3>
<div class="container five">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>
.container {
  display: flex;
  width: 400px;
  padding: 10px;
  background: seagreen;
}
.container.one {
  justify-content: flex-start;
}
.container.two {
  justify-content: flex-end;
}
.container.three {
  justify-content: center;
}
.container.four {
  justify-content: space-between;
}
.container.five {
  justify-content: space-around;
}
.box {
  width: 100px;
  height: 50px;
}
.box.one {
  background: salmon;
}
.box.two {
  background: skyblue;
}
.box.three {
  background: yellow;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.