<div class="caption">align-items: stretch; (default)</div>
<div class="flex-container-stretch">
  <div>1
  </div>
  <div>2
  </div>
  <div>3
  </div>
  <div>4
  </div>
  <div>5
  </div>
  <div>6
  </div>
  <div>7
  </div>
  <div>8
  </div>
</div>

<div class="caption">align-items: flex-start; (default)</div>
<div class="flex-container-start">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
</div>
<div class="caption">align-items: flex-end;</div>
<div class="flex-container-end">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
</div>
<div class="caption">align-items: center;</div>
<div class="flex-container-center">
  <div>
    1
  </div>
  <div>
    2
  </div>
  <div>
    3
  </div>
  <div>
    4
  </div>
  <div>
    5
  </div>
  <div>
    6
  </div>
  <div>
    7
  </div>
  <div>
    8
  </div>
</div>

.flex-container-start,
.flex-container-end,
.flex-container-center,
.flex-container-stretch {
  display: flex;
  background-color: lighten(darkorange, 20%);
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  height: 43px;

  & div {
    border: 1px solid black;
    background-color: darkorange;
    margin: 2px;
    padding-left: 5px;
    padding-right: 5px;
  }

  p {
    text-align: center;
  }
}

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

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

.flex-container-center {
  align-items: center;
}

.flex-container-stretch {
  align-items: stretch;
}

.caption {
  text-align: center;
}