弹性盒模型flexbox

弹性盒模型也叫伸缩盒模型，或flexBox。它决定一个盒子在其它盒子中的分布，以及如何处理可用的空间。使用该模型，可以轻松的创建“自适用”浏览器窗口的流动布局。
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列，使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型，只需要设置display的属性值flex，因为它是css3中为display新添加的值类型。
目的是：在浏览器变化时，盒子相应改变大小。
设置了弹性盒模型后，float，clear和vertical-align在flex中不起作用
父容器常用属性
display：flex；
定义一个flex容器
新弹性盒   设置父元素是一个弹性盒，子元素会自动水平排列。
flex-direction：column；
设置子元素垂直排列
主轴对齐方式
justify-content：flex-start；   默认值，居左
justify-content：flex-end；    居右
justify-content：center；      居中
justify-content：space-around；    四周
justify-content：space-between;    之间
侧轴对齐方式
align-items：flex-start；   居上，默认值
align-items：flex-end；    居下
align-items：center；       居中
子元素的属性
flex-grow：number；