<div id="align_self_center" style="width:100px; height: 100px;">
  <div style="height: 10px; width: 10px; align-self: center;"></div>
</div>

<div id="align_self_flex_end" style="width:100px; height: 100px;">
  <div style="height: 10px; width: 10px; align-self: flex-end;"></div>
</div>

<div id="align_self_flex_start" style="width:100px; height: 100px;">
  <div style="height: 10px; width: 10px; align-self: flex-start;"></div>
</div>

<div id="align_self_flex_end_override_flex_start" style="width:100px; height: 100px; align-items: flex-start;">
  <div style="height: 10px; width: 10px; align-self: flex-end;"></div>
</div>


<div id="align_self_baseline" style="width: 100px; height: 100px; flex-direction:row;">
  <div style="width: 50px; height: 50px;align-self: baseline;"></div>
  <div style="width: 50px; height: 20px;align-self: baseline;">
    <div style="width: 50px; height: 10px;"></div>
  </div>
</div>