伸缩布局

开启弹性布局：

父级:display:flex;设置该元素为伸缩盒子

开启弹性布局，主轴（X），副轴（Y）

flex-direction: column; 调整主副轴，主（Y），副（X）

row(默认：水平排列)、column(垂直排列)、row-reverse（水平反向排列）、column-reverse（垂直反向排列）

flex-wrap: wrap; 开启换行 no-wrap(不换行)

调整元素：

`主轴：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`