CSS > Flex 布局中的放大和收缩计算

2024年4月27日 170次阅读 来源: 残阳映枫红

原文：https://dev.opera.com/articles/flexbox-basics/

译者注：本文仅简单翻译下原文中关于如何计算 flex 属性的值的部分。其他有关 Flex 布局的知识本文不作探讨。

2015.12.5更新：关于 flex 不同的取值情况，以及 flex-basis 的取值意义，请参考我在这个问题中的回答：http://segmentfault.com/q/1010000004080910/a-1020000004100314

让你的元素伸缩

伸缩盒最强大的特性或许就在于能使得伸缩流方向中的子元素的长度（如果 flex-flow 为 row ，长度指 width，如果 flex-flow 为 column 则指 height）成为可伸缩量，该长度随伸缩流中父元素的可用空间量而变化。该特性通过使用 flex 属性实现，此属性的值由三部分构成。让咱们一个个地来添加这些部分同时观察其影响。首先，一个“伸缩放大系数 flex grow factor ”：

#first {flex: 1;}
#second {flex: 1;}
#third {flex: 1;}

这些无单位值用作比例——它们规定每个子元素应当占据父元素中的多少可用空间。如果都设置为 1，则在伸缩盒中的每个子元素将设为相等尺寸。如果给其中一个子元素赋值为 2，则该子元素将占据其他子元素的两倍空间，如下所示：

#first {flex: 1;}
#second {flex: 2;}
#third {flex: 1;}

你也可以为每个子元素设置一个伸缩基准值 flex basis，比如这样：

#first {flex: 1 200px;}
#second {flex: 2 300px;}
#third {flex: 1 250px;}

首先，根据伸缩流方向将伸缩基准值应用为每个子元素的宽度或高度。接着，根据伸缩放大系数，将父元素内剩余空间分配给子元素，得到子元素的最终宽度。据此当总共 750px 时，子元素主轴方向上尺寸为 200px，300px 和 250px。如果父容器主轴方向为 950px，那么将多出 200px 来分配给子元素。第一个和第三个子元素分别分配到 50px，因为其伸缩放大系数为 1，它们最终尺寸各为 250px 和 300px。第二个子元素将分配到 100px，因为其伸缩放大系数为 2。其最终尺寸为 400px。

flex 的第三部分值很少用到，但以防万一咱们还是看看。你也可以赋予你的子元素一个“伸缩收缩系数 flex shrink factor”，如下：

#first {flex: 1 1 400px;}
#second {flex: 2 3 600px;}
#third {flex: 1 2 400px;}

伸缩收缩系数，尽管称谓如此，但还是正值——即上述声明中的第二个无单位值。它们只有当子元素在主轴上溢出父容器的时候才会生效。它们也是作为比例值，但它们规定的是“溢出量”（子元素溢出父盒在之外的量）的比例，溢出量将从每个子元素的尺寸里面扣除，从而使得子元素总尺寸减少到和父元素的尺寸相等——实际上就是要阻止溢出。

我们来考虑主轴上 1100px 的父容器。这将造成我们上面的子元素溢出父容器 300px（子元素在主轴上总共是 1400px）。由于子元素上设置了伸缩收缩系数：

  • 第一个子元素将移除溢出量的 1/6，即 50px。其计算值因此变为 350px。

  • 第二个子元素将移除溢出量的 3/6，即 150px。其计算值因此变为 450px。

  • 第三个子元素将移除溢出量的 2/6，即 100px。其计算值因此变为 300px。

因此伸缩收缩系数越高元素反而越小。

    原文作者：残阳映枫红
    原文地址: https://segmentfault.com/a/1190000004079357
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞