CSS flex property

CSS 中的 flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写。它只作用于 flex-items，如果容器中的某个子项不是 flex-item，那么 flex 属性将不会影响该子项。

该属性用于设置弹性子项的长度。使用此 CSS 属性可以轻松定位子元素和主容器。它用于设置 flex-item 如何收缩或增长以适应空间。

flex 属性可以由一个、两个或三个值来指定。

• 当使用单值语法时，该值必须是数字，或者关键字，如 none、auto 或 initial。
• 当使用双值语法时，第一个值必须是数字（用作 flex-grow），第二个值可以是数字（用于 flex-shrink）或有效的宽度值（用作 flex-basis）。
• 当使用三值语法时，值必须遵循以下顺序：一个用于 flex-grow 的数字，一个用于 flex-shrink 的数字，以及一个有效的 flex-basis 的宽度值。

语法

属性值

flex-grow：它是一个正的无单位数字，决定了 flex-grow 系数。它指定了子项与其他弹性子项相比的增长比例。不允许使用负值。如果省略，则设置为1。

flex-shrink：它是一个正的无单位数字，决定了 flex-shrink 系数。它指定了子项与其他弹性子项相比的收缩比例。不允许使用负值。如果省略，则设置为1。

flex-basis：它是一个以相对或绝对单位表示的长度，定义了 flex-item 的初始长度。它用于设置 flex-item 的长度。其值可以是 auto、inherit，或者是一个后跟长度单位（如 em、px 等）的数字。不允许使用负值。如果省略，则设置为0。

auto：flex 属性的此值等效于 1 1 auto。

none：flex 属性的此值等效于 0 0 auto。它不会使 flex-items 增长或收缩。

initial：它将属性设置为其默认值。它等效于 0 0 auto。

inherit： 它继承父元素的属性。

示例

在这个例子中，有三个容器，每个容器有三个 flex-items。容器的 宽度 和高度为 300px 和 100px。

我们为第一个容器的 flex-items 应用了 flex: 1;，为第二个容器的 flex-items 应用了 flex: 0 50px;，为第三个容器的 flex-items 应用了 flex: 2 2;。

输出

示例

在这个例子中，有两个容器，每个容器有三个 flex-items。容器的 宽度 和 高度 为 200px 和 100px。

我们为第一个容器的 flex-items 应用了 flex: auto;，为第二个容器的 flex-items 应用了 flex: 0 1 30px;。

输出