<p class="caption">align-items: flex-end; some items overriden with align-self</p>
<div class="flex-container">
  <div class="a">
    align self not defined
  </div>
  <div class="b">
    align self not defined
  </div>
  <div class="c">
    align self not defined
  </div>
  <div class="d overriden">
    align-self: stretch;
  </div>
  <div class="e overriden">
    align-self: flex-start;
  </div>

</div>

.flex-container {
  display: flex;
  background-color: lighten(darkorange, 20%);
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  height: 88vh;
  align-items: flex-end;

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

.a,
.b,
.c,
.d,
.e,
.f {
  display: flex;
  align-items: center;
  min-height: 50px;
}

.d {
  align-self: stretch;
}

.e {
  align-self: flex-start;
}

.overriden {
  background-color: firebrick!important;
}

.caption {
  text-align: center;
  margin: 0;
}