伸缩布局

开启弹性布局：

1. 父级:display:flex;设置该元素为伸缩盒子
   开启弹性布局，主轴（X），副轴（Y）
2. flex-direction: column; 调整主副轴，主（Y），副（X）
   row(默认：水平排列)、column(垂直排列)、row-reverse（水平反向排列）、column-reverse（垂直反向排列）
3. flex-wrap: wrap; 开启换行 no-wrap(不换行)

4. 调整元素：
   `主轴：justify-content：
   flex-start 起始点对齐
   flex-end 终点对齐
   center 居中对齐
   space-around 四周环绕
   space-between 两端对齐

   副轴（当未开启换行时）：
       align-items：    flex-end 到主轴的末尾
               flex-start 默认值
               center 居中
               stretch拉伸
   
   副轴（当开启换行时）：
       align-content ：
           flex-start 起始点对齐
           flex-end 终点对齐
           center 居中对齐
           space-around 四周环绕
           space-between 两端对齐
           stretch拉伸
   #子级：align-self   单独设置元素 会顶替掉父元素的align-items
   flex-start
   flex-end
   center
   stretch`