<h3>1. stretch</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-start</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. flex-end</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. center</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-between</h3>
<div class="container five">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>

<h3>6. space-around</h3>
<div class="container six">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
</div>
.container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 100px;
  padding: 10px;
  background: seagreen;
}
.container.one {
  align-content: stretch;
}
.container.two {
  align-content: flex-start;
}
.container.three {
  align-content: flex-end;
}
.container.four {
  align-content: center;
}
.container.five {
  align-content: space-between;
}
.container.six {
  align-content: space-around;
}

.box {
  width: 100px;
}
.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.