<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>
.container {
  display: flex;
  width: 500px;
  height: 100px;
  padding: 10px;
  background: seagreen;
}
.container.one {
  align-items: stretch;
}
.container.two {
  align-items: flex-start;
}
.container.three {
  align-items: flex-end
}
.container.four {
  align-items: center;
}
.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.