Flex布局

Flex = Flexible Box 弹性布局
父容器声明display：flex/inline-flex
子容器的float、clear、vertical-align全部失效
Flex模型
父容器为container，子容器为item
main为横，cross为纵

• 可以设置的父容器属性为

1. flex-direction 项目排列方向，默认为row
2. flex-wrap 换行行为，默认为nowrap
3. flex-flow 简写direction，wrap属性
4. justify-content main上的对齐方式，默认flex-start左对齐
5. align-items cross上的对齐方式，默认为flex-start上对齐
6. align-content 双向上的对齐方式，默认stretch【轴线占满整个交叉轴】

• 可以设置的子容器属性为

1. order 排序顺序，默认为0，<越小越靠前>
2. flex-grow 放大比例，默认为0，不放大
3. flex-shrink 缩小比例，默认为1，等比例缩小
4. flex-basis 占据main空间，默认为auto
5. flex 简写grow、shrink、basis【auto(1 1 auto)、none(0 0 auto)】
6. align-self 自身对齐方式，默认auto继承父容器

详细语法如下：

http://www.runoob.com/w3cnote/flex-grammar.html

实例如下：
骰子布局、网格布局、圣杯布局、悬挂式布局、流式布局等应用

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html