CSS flex-basis 属性

此 CSS 属性指定了 flex 项的初始大小。它只对 flex-items 生效，如果容器中的某个项不是 flex-item，则 flex-basis 属性不会影响相应的项。通常，此 CSS 属性与 flex-shrink 和 flex-grow 等其他 flex 属性一起使用，并通常由 flex 简写属性来定义，以确保所有值都已设置。

语法

值

auto： 它是默认值。此值会将项的宽度设置为其 width 属性的值（如果已定义）。但如果未为 flex-item 指定 width 属性，则它会根据内容设置宽度。

width： 此值使用相对或绝对单位定义。它定义了 flex-item 的初始长度。不允许负值。

**初始：**它将属性设置为其默认值。

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

现在，让我们通过一些例子来理解这个属性。

示例

在此示例中，有一个包含五个 flex-items 的容器。在此，我们设置了各项的不同值，例如 auto、initial、inherit 和 150px。我们没有定义 width 属性，因此 auto、initial 和 inherit 等值会根据内容设置宽度，但有一个项的 flex-basis: 150px;，因此相应项的宽度将为 150px。

输出

示例

这是 flex-basis 属性的另一个示例。

输出

让我们看看如何使用 flex 简写属性来定义 flex-basis 属性。

示例

在此示例中，我们通过使用 flex 简写属性来设置 flex-basis 属性。flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写。在这里，我们将 100px 的值赋给 flex-basis，而另外两个则指定为 0。

输出