flex 布局原理
就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
父项常见属性
flex-direction：设置主轴的方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap子项常见属性
flex子项目占的份数align-self控制子项自己在侧轴的排列方式order属性定义子项的排列顺序（前后顺序）flex-direction 设置主轴方向
在flex布局中，默认主轴时x方向，有四个属性值：
row： 默认值，从左到右row-reverse：从右到左column： 从上到下column-reverse： 从下到上justify-content：设置主轴上的子元素排列方式
justify-content 属性定义了子元素在主轴上的对齐方式，右5个属性值：
flex-start: 默认值，从头部开始，如果主轴时x轴，则从左到右flex-end: 从尾部开始排列center： 在主轴居中对齐（如果是x轴则水平居中）space-around： 平分剩余空间space-between： 先两边贴边，再平分剩余空间flex-wrap：设置子元素是否换行
flex 布局中，当子元素宽度超出父元素宽度而排不下时，默认会自动缩减子元素的宽度使子元素一行显示，不存在换行。
nowrap 默认值，不换行wrap， 换行align-items：设置侧轴上的子元素排列方式（单行）
flex-start，默认值从上到下flex-end， 默认值从下到上center， 挤在一起居中（垂直居中）stretch 拉伸align-content：设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴排列方式并且只能用于出现换行（flex-wrap: wrap）情况才有效。
flex-start，默认值从上到下flex-end， 默认值从下到上center， 挤在一起居中（垂直居中）stretch 拉伸space-around： 平分剩余空间space-between： 先两边贴边，再平分剩余空间flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-flow: row wrap