Flex = Flexible Box 弹性布局
父容器声明display：flex/inline-flex
子容器的float、clear、vertical-align全部失效
Flex模型
父容器为container，子容器为item
main为横，cross为纵
image.png
- 可以设置的父容器属性为
- flex-direction 项目排列方向，默认为row
- flex-wrap 换行行为，默认为nowrap
- flex-flow 简写direction，wrap属性
- justify-content main上的对齐方式，默认flex-start左对齐
- align-items cross上的对齐方式，默认为flex-start上对齐
- align-content 双向上的对齐方式，默认stretch【轴线占满整个交叉轴】
- 可以设置的子容器属性为
- order 排序顺序，默认为0，<越小越靠前>
- flex-grow 放大比例，默认为0，不放大
- flex-shrink 缩小比例，默认为1，等比例缩小
- flex-basis 占据main空间，默认为auto
- flex 简写grow、shrink、basis【auto(1 1 auto)、none(0 0 auto)】
- align-self 自身对齐方式，默认auto继承父容器
详细语法如下：
实例如下：
骰子布局、网格布局、圣杯布局、悬挂式布局、流式布局等应用
