<h4># align-self:auto;(初期値)</h4>
<div class="d-flex">
  <div class="box-item">1</div>
  <div id="bi1" class="box-item">2</div>
</div><hr>

<h4># align-self:flex-start;</h4>
<div class="d-flex">
  <div class="box-item">1</div>
  <div id="bi2" class="box-item">2</div>
</div><hr>

<h4># align-self:flex-end;</h4>
<div class="d-flex">
  <div class="box-item">1</div>
  <div id="bi3" class="box-item">2</div>
</div><hr>

<h4># align-self:center;</h4>
<div class="d-flex">
  <div class="box-item">1</div>
  <div id="bi4" class="box-item">2</div>
</div><hr>

<h4># align-self:baseline;</h4>
<div class="d-flex">
  <div class="box-item">1</div>
  <div id="bi5" class="box-item">2</div>
</div><hr>

<h4># align-self:stretch;</h4>
<p>※フレックスボックスに[align-items:flex-start;]を適用。</p>
<div id="di_a" class="d-flex">
  <div class="box-item">1</div>
  <div id="bi6" class="box-item">2</div>
</div><hr>

*{
  box-sizing:border-box;
}
.d-flex{
  display:-webkit-flex;
  desplay:flex;
  height:100px;
  background-color:silver;
  border:solid 1px;
}

.box-item{
  background-color:lime;
  flex-basis:50px;
  border:solid 1px;
  margin:3px;
}
#bi1{
  align-self:auto;
}
#bi2{
  align-self:flex-start;
}
#bi3{
  align-self:flex-end;
}
#bi4{
  align-self:center;
}
#bi5{
  align-self:baseline;
}
#di_a{
  align-items:flex-start;
}
#bi6{
  align-self:stretch;
}