Spread Elements Vertically Using CSS

.example-1 {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.example-2 {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.example-2-gap {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.example-3 {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<div class="example-1">
  <span>Example 1</span>
  <span>Spread evenly through the parent element</span>
  <span>One more</span>
</div>

<div class="example-2">
  <span>Example 2</span>
  <span>Spread through the parent element, starting from the top</span>
  <span>One more</span>
</div>

<div class="example-2-gap">
  <span>Example 2</span>
  <span>Spread through the parent element, starting from the top</span>
  <span>With gaps</span>
</div>

<div class="example-3">
  <span>Example 3</span>
  <span>Spread through the parent element, starting from the bottom</span>
  <span>One more</span>
</div>