弹性盒

 给父元素添加
1.display:flex/inline-flex;
flex将对象作为弹性伸缩盒显示
inline-flex将对象作为内联块弹性伸缩盒显示
2.flex-direction (主轴排列方向)
row 默认，横向一行排列
       row-reverse 反转横向排列
       column 纵向排列
       column-reverse 反转纵向排列
    3.justify-content(主轴对齐方式)
     flex-start默认，顶端对齐
     flex-end末端对齐
     center居中对齐
     space-between两端对齐，中间自动分配
     space-around自动分配距离
     *默认元素在主轴上容不下不会换行，会被压缩
    4.align-items(侧轴对齐方式)
     flex-start 侧轴起始边界
flex-end 侧轴结束边界
center 居中放置
baseline 基线对齐
     stretch 默认值，项目被拉伸以适应容器
    5.flex-wrap设置换行
     nowrap 容器为单行，该情况下子项可能会溢出容器
wrap 容器为多行，子项内部会发生断行
wrap-reverse 反转排列
6.align-content(行与行之间对齐方式)
flex-start 没有行间距
     flex-end 底对齐没有行间距
     center 居中没有行间距
     space-between 两端对齐，中间自动分配
     space-around 自动分配距离
     stretch 默认值，项目被拉伸以适应容器