<div class="container">
  <div class="item orange">A</div>
  <div class="item green">B</div>
  <div class="item blue">C</div>
</div>
<div class="container" style="justify-content: flex-end;">
  <div class="item orange">A</div>
  <div class="item green">B</div>
  <div class="item blue">C</div>
</div>
<div class="container" style="justify-content: center;">
  <div class="item orange">A</div>
  <div class="item green">B</div>
  <div class="item blue">C</div>
</div>
<div class="container" style="justify-content: space-between;">
  <div class="item orange">A</div>
  <div class="item green">B</div>
  <div class="item blue">C</div>
</div>
<div class="container" style="justify-content: space-evenly;">
  <div class="item orange">A</div>
  <div class="item green">B</div>
  <div class="item blue">C</div>
</div>
<div class="container" style="justify-content: space-around;">
  <div class="item orange">A</div>
  <div class="item green">B</div>
  <div class="item blue">C</div>
</div>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
}

.item {
  color: black;
  font-size: 48px;
  padding: .5em;
  text-align: center;
}

.orange {
  background: yellow;
}

.green {
  background: lightgreen;
}

.blue {
  background: skyblue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.