详细学习flex布局
flex布局原理
flex是flexible Box的缩写，意为弹性布局，用来为盒子模型提供灵活性，任何一个容器都可以指定为flex布局。
当为父元素设置了flex布局后 ，子元素的float、clear、vertical-align会失效
总而言之， flex的布局原理就是通过给父盒子添加flex属性来控制子元素的排列方式。
flex布局父元素常见属性。
flex-direction:设置主轴的方向
justify-content：设置子元素排列的方向
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-content：设置侧轴上的子元素排列方式（单行）
flex-direction（主轴与侧轴）
flex-directiony的属性：
row 默认值 从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
现在我就测试一下有什么效果 ：首先我创建了
然后为元素加上长和宽和背景颜色后；
这样显示然后开启父元素flex定位
然后保存代码页面布局发生变化了。
原来从上到下排列现在从左到右排列，说明了开启了flex布局时flex-direction默认为row；
现在把flex-direction的值设置为column；
布局变成了没有设置display：flex之前了。
justify-content
设置主轴上的子元素排列方式（使用这个属性之前要确定好主轴是哪个）；
属性值：
flex-start：默认值从头开始；
flex-end：从尾部开始；
center：在主轴居中对齐；
space-around：平分剩余空间
space-between：先两边贴边在平分剩余空间
现在来测试一下代码hhh。。。接着上面的代码继续测试（此时主轴为x轴）
现在在父元素那里设置成这样。。
就变成这样了 瞬间把三个元素挪到后面去了
现在把justify-content设置为：center
果然居中了
现在设置成space-around
现在设置成space-between
是先中间一个 然后两个拍在边上。。
flex-warp
设置子元素是否换行；
两个常用属性
nowrap：默认值，不换行；
wrap：换行；
flex布局中，默认的子元素是不换行的，如果装不下了，会缩小子元素的宽度。。
现在我把子元素盒子变大看看会怎么样
我把原来盒子宽为50px的调成了150px 出来的效果是这样子的
这个盒子看起来就明显宽没有150px，父元素装不下子元素了，子元素不能把父元素撑开，所以只能把子元素缩小点咯。
现在我把代码设置成这样
这次就装不下自动换行了
额看起来间隔好大，我只知道把父元素高度设置矮然后才好看点
align-items
该属性是控制子元素在侧轴（默认为x轴）上的排列方式，在子项为单项的时候使用。
属性值
flex-start 默认值 从上到下。
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸
现在呢我设置了三个长为50px宽为50px的盒子来测试这些属性。
这是设置为align-items：flex-start的结果
设置为flex-end
这三个盒子就到底部咯。
设置为align-items：center；
盒子就到中间了
设置为align-items：stretch；
额没有变化，因为我设置了子盒子的高度，子盒子有高度了拉什么伸。
我把子盒子高度去掉了看看效果。
子元素拉下去了=。=。
align-content
设置侧轴子元素的排列方式。适用于多行的情况下。
只能用于子元素出现换行的情况，在单行下没有效果。
属性值；
flex-start 默认值在侧轴的头部开始排列。
flex-end 在侧轴尾部开始排列
center 在侧轴中间显示
space-around 子元素平分侧轴剩余空间
space-between 子项在侧轴先腹部在两头，再平分剩余空间
stertch 设置子元素高度平分父元素高度。
现在我测试一下代码=。=。 为了使子元素换行我加了三个盒子。
在设置了子元素换行时 align-content才会生效现在开始测试代码。
当值为
align-content：flex-end时
盒子都跑下面去了。
当值为align-content：center时
盒子都在中间分布了
当值为 align-content：space-around时；
当值为align-content：between；
当值为stretch；
当我把子元素高度全部去掉之后才会产生拉伸。
flex-flow
flex-flow属性是flex-dirction和flex-warp属性的复合属性
就是两个属性合二为一的意思吧。
把设置主轴方向和是否换列简写。
就简单说一下哈哈。。
flex-flow：row warp；
意思就是 从左到右排列 换行的意思。
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性。
默认值为auto，表示继承父元素的align-items类似于替代掉了。如果没有父元素就跟stretch差不多一样。
属性就简单说说吧。。。
center ；stretch ；flex-start ；flex-end。
可以让单个盒子进行位置上的改变。
order
order 属性设置在子元素中 具体设置为 order：（数字）;
可以改变子元素的排序 根据设定的轴来排序，order默认值是0，排列方式是按照 从小到大排。
我现在准备了6个盒子 已经开启了flex布局 如图
此时 我把 f中加入了order：-1；
效果为
这里会发现 第六个盒子排到第一个去了。
flex-grow
flex-grow 属性用于设置或检索弹性盒子的扩展比率
写个代码举例一下。
效果图
可以看成是先分成六小份，再给元素进行分配。
和flex-grow相反。
flex-shrink的预设值是1。
flex布局的子元素属性。
flex属性定义子元素分配剩余空间，用flex来表示占多少份数。
我创建了一个大盒子包着三个小盒子，然后先给边边两个盒子设置长和宽，在中间的盒子赋予flex：1； 然后中间的盒子就把剩余空间全部占了。
flex属性就是定义了子元素分配剩余空间