什么是Flex 布局？
Flex弹性布局，又称FFC-弹性格式化上下文，是当前毕竟流行的渲染规则(Formatting context)之一，类似的渲染规则：
- BFC-块级格式化上下文(Block formatting contexts)
- IFC-行内格式化上下文(Inline formatting contexts)
- FFC-弹性格式化上下文(Flex Formatting Contexts)
- GFC-网格布局格式化上下文(GridLayout Formatting Contexts)
开启Flex弹性布局：
dispaly:flex|inline-flex;
兼容写法：display:-webkit-flex;
flex 是什么属性的缩写？
flex是flex-grow、flex-shrink和flex-basis的缩写，简单记：grow扩大——shrink缩小——basis最小空间
flex:flex-grow flex-shrink flex-basis | auto | none | initial | inherit
flex-grow 容器空间： 扩大 比例，默认值为0，必须为数字
flex-shrink 容器空间 ：收缩 比例，默认值为1，必须为数字
flex-basis 容器空间 ：长度 大小，auto|inherit|%|px....或其他长度单位
案例：
flex: initial —— 默认值flex: 0 1 auto，不放大，空间不足会缩小；
flex: none —— 等同于flex: 0 0 auto，任何时候都不缩放；
flex: auto —— 等同于flex: 1 1 auto，自动缩放空间大小；
flex: 3(非负数) —— 等同于flex: 3 1 0%，允许放大3倍，允许缩放；
flex: 10px/5% —— 等同于flex: 1 1 10px/5%，自动缩放空间大小，最小空间为10px/5%
flex: 2 3(2个非负数) —— 等同于flex: 2 3 0%，最大允许放大2倍，最小缩放3倍；
flex： 10 6%(一个非负数，一个长度单位) —— 等同于flex: 10 1 6%，最大允许放大10倍，最小缩放1倍，最小空间为6%
注意：开启弹性布局必须写在父盒子上，flex属性写在子元素上；
这个编辑器不听我的话，why？第一次发掘金，有点懵逼，还需要用html5标签写？醉了
