弹性盒子是一种页面布局形式，使用弹性盒子进行布局可根据需求适配不同尺寸屏幕大小
flex-direction：控制父容器里子容器排列方式
flex-direction: row 默认排列方式（水平横向从左至右排列）
flex-direction:row-reverse 反向排列（水平横向从右至左）
flex-direction:column 默认排列方式(纵向从上到下排列)
flex-direction:column-reverse 反向排列(纵向从下到上排列)
justify-content: 控制父容器里子容器对齐方式
justify-content:flex-start 初始处对齐(常理解为左对齐也可以写left)
justify-content:flex-end 末尾初对齐(常理解为右对齐也可以写right)
justify-content:center 水平居中对齐
justify-content:space-around 平均分对齐(盒子与盒子，盒子与边框都有一定距离)
justify-content:space-between 平均分对齐(盒子与盒子之间有距离但两边的盒子紧贴边框)
align-items:控制父容器里子容器对齐方式
align-items:flex-end Y轴末端对齐
align-items:flex-start Y轴起点对齐
align-itms:center Y轴居中对齐
flex-warp: 控制父容器里子容器的换行形式
flex-warp:nowarp 默认单行
flex-warp:warp 从溢出的子容器自动换行
flex-warp:warp-reverse 从溢出的子容器反向自动换行
