<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>両端揃い</span>
  <span>均等揃い</span>
</p>
<!--▲デモ用のボタン▲-->
ul{
  width:40rem;
  background:#ddd;
  padding:1rem;
	display:-webkit-box;
	display:-moz-box;
	display:box;
	display:-webkit-flex;
	display:flex;
}
ul.fl_left{
  -moz-box-pack:start;
	-ms-box-pack:start;
	box-pack:start;
	flex-pack:start;
	-webkit-justify-content:flex-start;
	justify-content:flex-start;
}
ul.fl_center{
  -moz-box-pack:center;
	-ms-box-pack:center;
	box-pack:center;
	flex-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
}
ul.fl_right{
  -moz-box-pack:end;
	-ms-box-pack:end;
	box-pack:end;
	flex-pack:end;
	-webkit-justify-content:flex-end;
	justify-content:flex-end;
}
ul.fl_ryohaji{
  -moz-box-pack:justify;
	-ms-box-pack:justify;
	box-pack:justify;
	flex-pack:justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}
ul.fl_kinto{
	-webkit-justify-content:space-around;
	justify-content:space-around;
}
/*--------------------------*/
/*↓デモ用コード↓*/
li{
  background:white;
  list-style:none;
  width:3rem;
  height:3rem;
  text-align:center;
  line-height:3rem;
  border:1px solid gray;
}
span{
  text-decoration:underline;
  margin:0 1rem;
  cursor:pointer;
}
span:hover{
  color:blue;
}
//デモ用のボタン
$(function(){
  $("p span").click(function(){
    $('ul').removeClass();
    var spanNo = $('p span').index(this);
    if(spanNo == 0){
      $('ul').addClass('fl_left');
    }else if(spanNo == 1){
      $('ul').addClass('fl_center');
    }else if(spanNo == 2){
      $('ul').addClass('fl_right');
    }else if(spanNo == 3){
      $('ul').addClass('fl_ryohaji');
    }else if(spanNo == 4){
      $('ul').addClass('fl_kinto');
    }
  })
})
Rerun