CSS进阶-第三篇：深入 CSS 布局-Flexbox 布局（三）：项目的伸缩性

CSS进阶-第三篇：深入 CSS 布局-Flexbox 布局（三）：项目的伸缩性

在 Flexbox 布局体系中，flex-grow、flex-shrink 和 flex-basis 这三个属性是实现灵活且自适应布局的关键，它们赋予了 Flex 项目独特的伸缩能力。下面我们就对这些属性进行深入探讨。

1. flex-grow 放大比例

作用解析

flex-grow 属性决定了 Flex 项目在 Flex 容器存在剩余空间时，如何分配这些空间进行放大。该属性的值为一个数字，默认值是 0，表示当容器有剩余空间时，该项目不会主动放大。当多个项目的 flex-grow 属性值不为 0 时，剩余空间会按照它们 flex-grow 值的比例进行分配。

例如，假设有一个 Flex 容器，内部有三个 Flex 项目，容器宽度为 600px，三个项目的 width 分别为 100px，那么剩余空间为 600-3×100 = 300px。如果三个项目的 flex-grow 分别设为 1、2、3，则这 300px