在传统的css布局，都是依赖于position，float，dosplay进行。在一些特定的布局的实现上往往很不方便，比如一个元素的垂直居中。鉴于这种关系，2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
首先让我们明白在flex中什么是容器，什么是元素
<div>//容器 <div></div>//元素 <span></span>//元素 <img/>//元素 </div>
在flex容器内的元素，没有块级元素，行内元素的区别，都是flex元素，可以设置高宽，可以看做没有换行符的块级元素
在flex项目容器和元素分别都有一些属性值
容器
flex-direction 决定容器主轴方向
row
row-severse
column 卡拉母
column-reverse
flex-wrap 决定多个元素排列超过容器最大宽度时，是否换行,如果不换行将会制动缩小，以适应容器
wrap
nowrap
wrap-reverse
flex-flow flex-direction和flex-wrap的缩写
justify-content 元素在主轴上的对齐方式
flex-start
flex-end
center
space-between
space-around
space-evenly 元素与元素 和 元素与容器边框 平分剩余空间
align-items 元素在交叉轴上的对其方式，默认值为stretch
flex-start
flex-end
center
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
align-content 元素（多主轴时交叉轴对齐方式，只有一条主轴时无效）
flex-start
flex-end
center
stretch 咝 jua 其
space-between
space-around
元素
order:0 数值越小排序越靠前 默认为0
flex-grow:0 放大比例，如果还有剩余空间，就将剩余空间分成若干等分，如果有两个元素，一个为1一个为2，那么它们的将分别占据剩余空间的1/3和2/3。默认为0 即存在空余空间也不放大，
flex-shrink：1 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，缩小的越多，如果为0不缩小(shi in k)
align-self 允许元素有自己的对齐方式，只会覆盖掉align-items不会覆盖掉align-content,
center
flex-start
flex-end
auto
baseline
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度