01-flex-主轴对齐方式

一，前期准备

1，清空默认设置

*{
      margin:0;
      padding: 0;
      list-style: none;
}

2，内容盒子准备

<div class="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>

3，设置盒子样式

.box li{
      height: 50px;
      width: 50px;
      background-color: pink;
    }

4 ,设置弹性盒子

父级标签设置display:flex

ul{
      display: flex;
      height: 300px;
      width: 300px;
      border: 1px solid #000;
    }

效果图：设置前： 设置后：

二，主轴对齐方式 

1，左对齐：justify-content: flex-start;（默认对齐方式）

 ul{
      display: flex;
      justify-content: flex-end;
      height: 300px;
      width: 300px;
      border: 1px solid #000;
    }

 2，其他对齐方式及对比

左对齐：flex-start

右对齐：flex-end

居中对齐：center

空格均匀分布：space-between

中间两倍空格：space-around

空格均分(含两端)：space-evenly