<p><strong>display: block</strong></p>
<div class="row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

<p><strong>display: flex; justify-content: flex-start</strong></p>
<div class="row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

<p><strong>display: flex; justify-content: flex-end</strong></p>
<div class="row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

<p><strong>display: flex; justify-content: center</strong></p>
<div class="row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

<p><strong>display: flex; justify-content: space-between</strong></p>
<div class="row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

<p><strong>Flexbox with justify-content: space-around</strong></p>
<div class="row">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div>
  <div class="col">Col 3</div>
</div>

body {
  color: #333;
  font-family: sans-serif;  
}

.row {
  display: flex;
  padding: 5px;
  margin: 0 0 50px 0;
  background-color: #4980D2;
}

.col {
  padding: 15px;
  margin: 5px;
  background-color: #CEE3FE;
  font-family: sans-serif;
  text-align: center;
}

.row:nth-of-type(1) {
   display: block;
}

.row:nth-of-type(3) {
  justify-content: flex-end;
}

.row:nth-of-type(4) {
  justify-content: center;
}

.row:nth-of-type(5) {
  justify-content: space-between;
}

.row:nth-of-type(6) {
  justify-content: space-around;
}

.row:nth-of-type(7) {
  justify-content: stretch;
}