面试题一：介绍 一下Flex 布局，flex 是什么属性的缩写?

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案例：

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属性写在子元素上；