Flex使用

[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深入理解等相关