Bootstrap Flex 布局：flex-grow 和 flex 属性详解

在 Bootstrap 中，'flex-grow' 和 'flex' 都是用于控制 flex 元素的特性的属性。

'flex-grow' 是一个非负整数，用于指定 flex 元素在可用空间中的增长比例。例如，如果一个容器中有三个元素，其中一个元素的 'flex-grow' 属性设置为 2，另一个元素的 'flex-grow' 属性设置为 1，那么第一个元素将比第二个元素多占用一倍的可用空间。

'flex' 是一个用于设置 flex 元素的缩放因子的属性。它是一个三元素的属性，分别表示 'flex-grow'、'flex-shrink' 和 'flex-basis'。'flex-grow' 和 'flex-shrink' 的值可以是非负整数或 'auto'，'flex-basis' 的值可以是一个长度、一个百分比或 'auto'。例如，'flex: 1 0 auto;' 表示该元素可以增长，但不会缩小，并且其初始大小为 'auto'。

因此，'flex-grow' 和 'flex' 的区别在于，'flex-grow' 只控制元素在可用空间中的增长比例，而 'flex' 还可以控制元素的缩放和初始大小。