<h2>align-items: stretch</h2>
<div class="container stretch">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<h2>align-items: center</h2>
<div class="container center">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<h2>align-items: flex-start</h2>
<div class="container flex-start">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<h2>align-items: flex-end</h2>
<div class="container flex-end">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
.container{
  height: 250px;
  display: flex;
  flex-direction:row;
  margin-right: 10px;
  background-color: #eee;
  margin-bottom: 80px;
}

.stretch{ align-items: stretch;}
.center{ align-items: center;}
.flex-start{ align-items: flex-start;}
.flex-end{ align-items: flex-end;}


.box{
  width: 100px;
  margin: 10px;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  line-height: 100px;
}

.box:nth-child(1){background-color: gold;}
.box:nth-child(2){background-color: pink;}
.box:nth-child(3){background-color: skyblue;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.