@CodeDreamfy

flex

属性深入

关键字属性值

initial

初始值。flex:initial等同于设置"flex: 0 1 auto"。可以理解为flex属性的默认值。

行为表现:不会增长变大占据flex容器中的额外的剩余空间(flex-grow:0),会收缩变小以适应容器(flex-shrink:1),尺寸根据自身宽高属性进行调整(flex-basis:auto)

auto

flex:auto等同于设置flex: 1 1 auto;

行为表现:子项会增长变大占据flex容器中的剩余空间(如果每个子项都设置了auto将会平分剩余空间)(flex-grow:1),会收缩变小以适应容器(flex-shrink: 1),尺寸根据自身宽度属性进行调整(flex-basis: auto)。

none

flex: none等同于设置flex: 0 0 auto

行为表现:子项不会增长变大占据flex容器中的额外剩余空间(flex-grow: 0),也不会收缩变小以适应容器(flex-shrink: 0),尺寸根据自身宽高属性进行调整(flex-basis: auto)

flex财产分配三剑客

最后再说说一开始提到的flex-grow,flex-shrink和flex-basis。

要牢记这3个属性默认值,不然遇到只有1~2个参数时候,根本不知道什么意思。

• flex-grow

  flex-grow指定了容器剩余空间多余时候的分配规则,默认值是0,多余空间不分配。

• flex-shrink

  flex-shrink指定了容器剩余空间不足时候的分配规则,默认值是1,空间不足要分配。

• flex-basis

  flex-basis则是指定了固定的分配数量,默认值是auto。如会忽略设置的同时设置width或者height属性。

  flex-basis 如果有一个明确的值,即除了auto以外的值,那么该容器会有一个明确的宽/高,占据固定空间,在IE10/IE11下,盒子的内容宽度是flex-basic设置的具体宽度,会无视我们设置的box-sizing:border-box;

  因此当子容器设置flex-basis的时候,尽量不要设置padding,否则可能会出乎意外的表现

  参考:https://github.com/philipwalton/flexbugs

  案例

  例子来源张鑫旭《CSS flex熟悉深入理解》

  范张,范鑫和范旭每人100万固定家产,范帅和范哥则20万保底家产。如果范闲归西那天家产还有富余,范帅和范哥按照3:2比例分配;如果没有剩余财产,则范张,范鑫和范旭三位兄长按照2:1:1的比例给两人匀20万保底家产。

  <div class="container">
   <item clas="zhang">范张</item>
   <item clas="xin">范鑫</item>
   <item clas="xu">范旭</item>
   <item clas="shuai">范帅</item>
   <item clas="ge">范哥</item>
  </div>

  .container {
   /* 范闲:来,家产分配开始了~ */
   display: flex; 
  }
  .zhang {
   /* 老大不会争夺多余财产,但是会在财产不足时候分出老二老三分出的2倍的财产,这是作为老大应有的姿态 */
   flex: 0 2 100px; 
  }
  .xin,
  .xu {
   /* 老二和老三不会争夺多余财产,但是会在财产不足时候分出部分财产,照应老四和老幺 
   这里也可以直接写成:flex: 100px*/
   flex: 0 1 100px; 
  }
  .shuai {
   /* 老四会争夺多余财产,且会在财产不足时候享用哥哥们分出的财产,确保能够活下去,感谢三位哥哥的照顾 */
   flex: 3 0 20px; 
  }
  .ge {
   /* 老五会争夺多余财产,不过比例比哥哥少一点,且会在财产不足时候享用哥哥们分出的财产,感谢哥哥们的照顾 */
   flex: 2 0 20px; 
  }

flex几种传值意义

• 一个值

  表示flex-grow,此时flex-shrink和flex-basis的值分别是1和0%,注意这里的flex-basis的值是0而不是auto

  如果是长度值,例如flex: 100px,则指的是flex-basis,因为三个属性中只有flex-basis是长度值。此时flex-grow和flex-shrink都是1

• 两个值

  两个值的话,第一个一定指flex-grow,第二个根据值的类型表示不同的css属性

  • 如果第二个值是数值,例如flex: 1 2,则这个2表示flex-shrink,此时flex-basis计算值为0%,并非默认值auto
  • 如果第二个值是长度值,例如flex: 1 100px,则这个100px指flex-basis,此时flex-shrink使用默认值0

• 三个值

  如果flex是三个值,则是正常语法

使用场景

单值语法	等同于	备注
flex: initial	flex: 0 1 auto	初始值,常用
flex: 0	flex: 0 0 0%	适用场景少
flex: none	flex: 0 0 auto	推荐
flex: 1	flex: 1 1 0%	推荐
flex: auto	flex: 1 1 auto	适用场景少

flex-basis

当该属性配合width一起使用的时候,只有当auto的情况下width才起作用。

flex: initial使用场景

常见于按钮、标题、小图标等小部件的排版布局,因为这些小部件的宽度都不会很宽,水平位置的控制多使用justify-content和margin-left:auto/margin-right:auto实现。

flex:initial声明还适用于一侧内容宽度固定,另外一侧内容宽度任意的两栏自适应布局场景

总结下就是那些希望元素尺寸收缩,同时元素内容万一较多又能自动换行的场景可以不做任何flex属性设置

flex: 0与flex: none区别与场景

flex: 0等同于设置flex: 0 0 auto

行为表现:元素尺寸不会弹性增大,也不会弹性变小,也就是元素不再具有弹性

flex-basis: 0%与flex-basis: auto区别

第一个是固定尺寸是0,由于元素不具有弹性,因此尺寸表现为最小内容宽度

第二个flex-basis: auto标识固定尺寸由内容决定,由于元素不具有弹性,因此元素内容不会换行。

适用场景

flex: 0适用于左右布局,比如左侧是头像,右侧不固定,左侧下面文字需要以图片宽度来

flex: none适用于内容右侧有一个不能换行的按钮或者其他东西

flex: 1 与flex: auto区别于场景

flex: 1等同于flex: 1 1 0%

flex: auto等同于flex: 1 1 auto

行为表现: 元素尺寸可以弹性增大,也可以弹性变小,但flex: 1在尺寸不足时候优先最小化内容尺寸,flex: auto在尺寸不足时会优先最大化尺寸

当希望元素充分利用剩余空间,同时不会侵占其他元素应有的宽度的时候,适合用flex: 1,例如所有等分,也适用于无规律布局中的动态内容元素

当希望元素充分利用剩余空间,但是各自的尺寸按照各自内容进行分配的时候,适合flex: auto,多用于内容固定,或者内容可控的布局场景,例如导航数量不固定,每个导航文字数量也不固定的导航效果就适合使用flex:auto效果来实现

总结

• flex:initial表示默认的flex状态,无需专门设置,适合小控件元素的分布布局,或者某一项内容动态变化的布局;
• flex:0适用场景较少,适合设置在替换元素的父元素上;
• flex:none适用于不换行的内容固定或者较少的小控件元素上,如按钮。
• flex:1适合等分布局;
• flex:auto适合基于内容动态适配的布局;

以上内容全部参考自张鑫旭CSS Flex深入理解等相关