<p class="caption">align-self</p>
<div class="flex-container">
  <div class="a">
    flex-start
  </div>
  <div class="b">
    flex-end
  </div>
  <div class="c">
    center
  </div>
  <div class="d">
    stretch
  </div>
  <div class="e">
    baseline
  </div>
    <div class="f">
    baseline<br>
      with multiple lines
  </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;

  & 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;
}

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

.b {
  align-self: flex-end;
}

.c {
  align-self: center;
}

.d {
  align-self: stretch;
}

.e {
  align-self: baseline;
  height: 80px;
}

.f {
  align-self: baseline;
  height: 60px;
}


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