<h1>justify-content: flex-start</h1>
<div class="flex-container flex-start">
  <div class="flex-item">item1</div>
  <div class="flex-item">item2</div>
  <div class="flex-item">item3</div>
</div>

<h1>justify-content: center</h1>
<div class="flex-container center">
  <div class="flex-item">item1</div>
  <div class="flex-item">item2</div>
  <div class="flex-item">item3</div>
</div>


<h1>justify-content: flex-end</h1>
<div class="flex-container flex-end">
  <div class="flex-item">item1</div>
  <div class="flex-item">item2</div>
  <div class="flex-item">item3</div>
</div>

<h1>justify-content: space-around</h1>
<div class="flex-container space-around">
  <div class="flex-item">item1</div>
  <div class="flex-item">item2</div>
  <div class="flex-item">item3</div>
</div>

<h1>justify-content: space-between</h1>
<div class="flex-container space-between">
  <div class="flex-item">item1</div>
  <div class="flex-item">item2</div>
  <div class="flex-item">item3</div>
</div>

.flex-container {
  display: flex;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #ccc;
}

.flex-item {
  margin: 10px;
  padding: 10px;
  background-color: yellow;
}

.flex-start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.flex-end {
  justify-content: flex-end;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

h1 {
  margin-bottom: 0;
  font-size: 16px;
}