<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<p><span>上揃い</span><span>中央揃い</span><span>下揃い</span><span>縦100%</span></p>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  line-height:300%;
}
/*↑デモ表示用コード↑*/
/*--------------------------*/
ul{
  width:100%;
  height:10rem;
  padding:1rem;
  background:#ddd;
	display:-webkit-box;
	display:-moz-box;
	display:box;
	display:-webkit-flex;
	display:flex;
}
li.fl_start{
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
li.fl_center{
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}
li.fl_end{
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}
li.fl_stretch{
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
/*--------------------------*/
/*↓デモ表示用コード↓*/
li{
  background:white;
  list-style:none;
  width:3rem;
  height:3rem;
  text-align:center;
  line-height:3rem;
  border:1px solid gray;
  margin-right:1rem;
}
span{
  text-decoration:underline;
  margin:0 1rem;
  cursor:pointer;
}
span:hover{
  color:blue;
}
//デモ用のボタン
$(function(){
  $("p span").click(function(){
    $('li').removeClass();
    var spanNo = $('p span').index(this);
    if(spanNo == 0){
      $('li').eq(0).addClass('fl_start');
    }else if(spanNo == 1){
      $('li').eq(0).addClass('fl_center');
    }else if(spanNo == 2){
      $('li').eq(0).addClass('fl_end');
    }else if(spanNo == 3){
      $('li').eq(0).addClass('fl_stretch');
      $('li').eq(0).css({height:'auto'})
    }
  })
})
Rerun