面试题一:介绍 一下Flex 布局,flex 是什么属性的缩写?-Qui-Note

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