Flex 布局精要

Flex-Flexible Box 弹性布局
09年，W3C 提出的一种页面布局方案，可以简便、完整、响应式地实现各种页面布局
将一个容器元素的display 设置为flex，就可以应用flex布局了
*设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
flex 布局分为两部分内容：弹性容器(flex container)和弹性子项(flex items) 
一个div被设置为flex容器，那么此div下一级子元素自动成为flex items（意思就是说如果div容器下有个包含其他子元素的div，那么flex不会影响子div下的其他子元素）

#容器常用属性：flex-direction,flex-wrap,justify-content,align-items,flex-flow

##justify-content(子项水平布局方式):
space-around-如果有多余空间，项目平均分布，项与边框之间留有一定的距离，一般是子项间距离的1/2
space-between-如果有多余空间，项目靠两端对齐，项与边框之间的距离较窄，类似文本两端对齐

##align-items(子项垂直布局方式)：垂直居中是center 而不是middle

##不常用的：align-content(子项在多根轴线上的布局方式，只有一根轴线时不起作用)
##综合设置属性：flex-flow: flex-direction(row) || flex-wrap(nowrap) 括号内为默认值

#子项常用属性：order,flex-grow,flex-shrink,flex-basis,align-self,flex
##flex-shrink(项目缩小比例):默认值为1，（如果有个别项设置为0表示不缩小，即主轴上不会受到其他项flex-basis的影响）
##flex-basis(项目在主轴上的尺寸):负值无效，px,%适用，如果尺寸过大会挤压其他项空间，如果尺寸过小意味着出让空间给其他项
##综合设置属性：flex: flex-grow(0) flex-shrink(1) flex-basis(auto) 括号内为默认值，后两个属性可选