CSS flex 布局之 flex-grow 与 flex-shrink 计算比例深入解析

2023-10-12 22:02:51

前言

在 CSS 布局中，flexbox 布局凭借其强大的灵活性深受开发者的喜爱。其中，flex-grow 和 flex-shrink 属性是 flexbox 布局中的两个关键属性，用于控制子元素在父元素中的伸缩行为。本文将深入解析 flex-grow 和 flex-shrink 的计算比例，帮助读者理解和掌握这两个属性的应用技巧。

flex-grow 与 flex-shrink 属性概述

flex-grow 属性指定子元素在父元素中占据的剩余空间的比例。该属性的默认值为 0，这意味着子元素不会占据任何剩余空间。如果 flex-grow 属性设置为非零值，则子元素将根据其 flex-grow 值与其他子元素竞争剩余空间。

flex-shrink 属性指定子元素在父元素中被压缩时的收缩比例。该属性的默认值为 1，这意味着子元素将与其他子元素平均收缩。如果 flex-shrink 属性设置为小于 1 的值，则子元素将在压缩时比其他子元素收缩得更多。

flex-grow 与 flex-shrink 的计算比例

在计算 flex-grow 和 flex-shrink 的比例时，需要考虑以下因素：

父元素的剩余空间： 父元素的剩余空间是父元素的总宽度或高度减去所有子元素的宽度或高度。
子元素的 flex-grow 和 flex-shrink 值： 子元素的 flex-grow 和 flex-shrink 值决定了该子元素在父元素的剩余空间中占据的比例。

计算公式：

子元素占据的剩余空间 = 父元素的剩余空间 * 子元素的 flex-grow 值 / 子元素的 flex-grow 值之和

举例：

假设我们有一个父元素，宽度为 500px，里面有两个子元素，子元素 A 和子元素 B。子元素 A 的 flex-grow 值为 1，子元素 B 的 flex-grow 值为 2。父元素的剩余空间为 500px - 100px - 200px = 200px。那么，子元素 A 占据的剩余空间为 200px * 1 / (1 + 2) = 66.67px，子元素 B 占据的剩余空间为 200px * 2 / (1 + 2) = 133.33px。

应用场景

flex-grow 和 flex-shrink 属性在实际项目中有着广泛的应用场景，例如：

水平排列子元素，并让子元素占据剩余空间： 可以通过设置子元素的 flex-grow 属性为非零值来实现。
垂直排列子元素，并让子元素占据剩余空间： 可以通过设置子元素的 flex-grow 属性为非零值，并设置父元素的 flex-direction 属性为 column 来实现。
让子元素在父元素中居中排列： 可以通过设置子元素的 flex-grow 属性为 1，并设置父元素的 justify-content 属性为 center 来实现。
让子元素在父元素中均匀分布： 可以通过设置所有子元素的 flex-grow 属性为 1，并设置父元素的 justify-content 属性为 space-between 来实现。