<!-- flex-start -->
<div style="width: 25%;">
  <div style="text-align:center; padding: 0 0 2px; color: #718096;">align-items:</div>
  <div style="text-align:center; padding: 0 0 12px;">flex-start</div>
  <div style="display:flex; align-items:flex-start; justify-content: center; background-color: #EDF2F7; padding: 12px; border: 4px solid white;">
    <div style="width: 20px; background-color: #A0AEC0; height: 64px; margin: 0 2px;"></div>
    <div style="width: 20px; background-color: #A0AEC0; height: 32px; margin: 0 2px;"></div>
    <div style="width: 20px; background-color: #A0AEC0; height: 48px; margin: 0 2px;"></div>
  </div>
</div>
<!-- center -->
<div style="width: 25%;">
  <div style="text-align:center; padding: 0 0 2px; color: #718096;">align-items:</div>
  <div style="text-align:center; padding: 0 0 12px;">center</div>
  <div style="display:flex; align-items:center; justify-content: center; background-color: #EDF2F7; padding: 12px; border: 4px solid white;">
    <div style="width: 20px; background-color: #A0AEC0; height: 64px; margin: 0 2px;"></div>
    <div style="width: 20px; background-color: #A0AEC0; height: 32px; margin: 0 2px;"></div>
    <div style="width: 20px; background-color: #A0AEC0; height: 48px; margin: 0 2px;"></div>
  </div>
</div>
<!-- flex-end -->
<div style="width: 25%;">
  <div style="text-align:center; padding: 0 0 2px; color: #718096;">align-items:</div>
  <div style="text-align:center; padding: 0 0 12px;">flex-end</div>
  <div style="display:flex; align-items:flex-end; justify-content: center; background-color: #EDF2F7; padding: 12px; border: 4px solid white;">
    <div style="width: 20px; background-color: #A0AEC0; height: 64px; margin: 0 2px;"></div>
    <div style="width: 20px; background-color: #A0AEC0; height: 32px; margin: 0 2px;"></div>
    <div style="width: 20px; background-color: #A0AEC0; height: 48px; margin: 0 2px;"></div>
  </div>
</div>
<!-- stretch -->
<div style="width: 25%;">
  <div style="text-align:center; padding: 0 0 2px; color: #718096;">align-items:</div>
  <div style="text-align:center; padding: 0 0 12px;">stretch</div>
  <div style="display:flex; align-items:stretch; justify-content: center; background-color: #EDF2F7; padding: 12px; border: 4px solid white;">
    <div style="width: 20px; background-color: #A0AEC0; height: 64px; margin: 0 2px;"></div>
    <div style="width: 20px; background-color: #A0AEC0; margin: 0 2px;"></div>
    <div style="width: 20px; background-color: #A0AEC0; margin: 0 2px;"></div>
  </div>
</div>
body {
  display: flex;
  height: 100vh;
  margin: 0;
  align-items: center;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div {
/*   padding: 12px; */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.