flex-grow和flex-shrink使用

104 阅读2分钟

flex-grow

flex-grow 处理父元素在还有剩余空间时的分配规则,分为两种情况。
即:所有元素的 flex-grow 值之和大于1,和小于1。

  1. 大于1时,例如:
    父元素宽600,子元素A和B,宽分别为200,300。还剩余100。
    此时A,B的 flex-grow 分别为2,3。则剩余100,分给A 2/5,分给B 3/5。
    A,B宽度为:

        200 + 40 = 240
        300 + 60 = 360
    
  2. 小于1时,作为分母的总和会引入1来处理。例如:
    上例中,A,B flex-grow 分别为 0.2,0.3。则分给A 0.2/1,分给B 0.3/1。
    A,B宽度为:

        200 + 20 = 220
        300 + 30 = 330
    

    还剩50没有分配给任何子元素扩张。

  3. 另外,flex-grow 还会受到父元素的 max-width 影响。如果grow后的结果超出 max-widthmax-width 会优先生效。


flex-shrink

flex-grow 处理父元素剩余空间相对应的,是 flex-shrink 处理父元素空间不足时,子元素的收缩规则。
同样分为两种情况,所有元素的 flex-shrink 值之和大于1,和小于1。

  1. 大于1时,例如:
    父元素宽度为600,子元素宽度为400,300。超出100。
    A,B flex-shrink 分别为 1,2。总权重为 400 + 300 * 2 = 1000

        A收缩 -100 * 1 * 400 / 1000 = -40
        B收缩 -100 * 2 * 300 / 1000 = -60
    

    A,B实际宽度为:

        400 - 40 = 360
        300 - 60 = 240
    
  2. 小于1时,例如,
    A,B flex-shrink 分别为 0.1,0.2。总权重为 400 * 0.1 + 300 * 0.2 = 100 子元素收缩总和为 100 * 0.3 / 1 = 30

        A收缩 -30 * 0.1 * 400 / 100 = -12
        B收缩 -30 * 0.2 * 300 / 100 = -18
    

    A,B实际宽度为:

        400 - 12 = 388
        300 - 18 = 282
    

    多出70没有分配给任何子元素收缩。

  3. 同样,也会受到min-width的限制。


发现一个很好玩的flex使用游戏教程:flexboxfroggy.com/