ALIGN-ITEMS

Run
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <style>
      .flex-container {
  display: flex;
  border: 1px solid black;
  margin: 10px 0;
}

.flex-item {
  margin: 5px;
  padding: 5px;
  font-size: 32px;
  background-color: red;
  color: white;
}

.flex-start {
  align-items: flex-start;
}

.flex-end {
  align-items: flex-end;
}

.center {
  align-items: center;
}

.baseline {
  align-items: baseline;
}

.stretch {
  align-items: stretch;
}

.a {
  height: 10vh;
  width: 20%;
}

.b {
  height: 20vh;
  width: 10%;
}

.c {
  height: 25vh;
  width: 30%;
}

.d {
  height: 15vh;
  width: 15%;
}

  </style>
  <title>Align-Items</title>
</head>

<body>
  <h3>flex-start</h3>
  <div class="flex-container flex-start">
    <div class="flex-item a">1</div>
    <div class="flex-item b">2</div>
    <div class="flex-item c">3</div>
    <div class="flex-item d">4</div>
  </div>

  <h3>flex-end</h3>
  <div class="flex-container flex-end">
    <div class="flex-item a">1</div>
    <div class="flex-item b">2</div>
    <div class="flex-item c">3</div>
    <div class="flex-item d">4</div>
  </div>

  <h3>center</h3>
  <div class="flex-container center">
    <div class="flex-item a">1</div>
    <div class="flex-item b">2</div>
    <div class="flex-item c">3</div>
    <div class="flex-item d">4</div>
  </div>

  <h3>baseline</h3>
  <div class="flex-container baseline">
    <div class="flex-item a">1</div>
    <div class="flex-item b">2</div>
    <div class="flex-item c">3</div>
    <div class="flex-item d">4</div>
  </div>

</body>

</html>