css flex justify-content属性，子元素在主轴上的对齐方式。

justify-content属性控制子元素在主轴上的对齐方式,支持flex-start 、 flex-end 、 center 、 space-between 、 space-around对齐方式。

justify-content属性

可选值	说明
flex-start	默认值，向主轴start位置对齐，当flex-direction:row 时可以理解成左对齐
flex-end	向主轴end位置对齐,当flex-direction:row 时可以理解成右对齐
center	居中对齐
space-between	两边对齐，每个子元素的间隔相等
space-around	每个子元素的间隔相等，因此子元素的间隔比子元素与边框的间隔大一倍

flex-start例子

<style> 
    .boxs
      {  
        width:80%;
        height:100px;
        border:1px solid #333;
        display:flex; 
        justify-content:flex-star;
      }
     .boxs div
      {  
        width:20%;  
    }
 </style>
<div class="boxs">
  <div style="background-color:#ffc5c5;" >子元素A</div>
  <div style="background-color:#7171f7;" >子元素B</div>  
  <div style="background-color:#c6d8c6;" >子元素C</div>
  <div style="background-color:#c9b0fb;" >子元素D</div>
</div>

例子

flex-end例子

例子

center例子

例子

space-between例子

例子

space-around例子

例子