重新认识flex-grow、flex-shrink、flex-basis

前端

2023-09-07 17:25:34

flex 布局是一种强大的布局系统，它允许您轻松创建响应式布局。flex 布局使用 flex 容器和 flex 项目来定义布局结构。flex 容器是包含 flex 项目的元素，而 flex 项目是 flex 容器内的子元素。

flex-grow

flex-grow 属性定义元素在 flex 容器中扩展自身以填充可用空间的程度。flex-grow 的值可以是数字或。数字值表示元素应该扩展的倍数，而关键字有：

auto：元素应该扩展以填充可用空间，但不会超过其 flex-basis。
initial：元素应该保持其 flex-basis。
inherit：元素应该继承其父元素的 flex-grow 值。

默认情况下，flex-grow 的值为 0，这意味着元素不会扩展自身。如果要让元素扩展自身，可以将 flex-grow 的值设置为大于 0 的数字或 auto。

flex-shrink

flex-shrink 属性定义元素在 flex 容器中收缩自身以适应可用空间的程度。flex-shrink 的值可以是数字或关键字。数字值表示元素应该收缩的倍数，而关键字有：

auto：元素应该收缩以适应可用空间，但不会小于其 flex-basis。
initial：元素应该保持其 flex-basis。
inherit：元素应该继承其父元素的 flex-shrink 值。

默认情况下，flex-shrink 的值为 1，这意味着元素会收缩自身以适应可用空间。如果要让元素不收缩自身，可以将 flex-shrink 的值设置为 0 或 auto。

flex-basis

flex-basis 属性定义元素在 flex 容器中的初始尺寸。flex-basis 的值可以是长度值、百分比值或关键字 auto。

长度值：元素的初始尺寸将被设置为指定的长度。
百分比值：元素的初始尺寸将被设置为其父元素尺寸的指定百分比。
auto：元素的初始尺寸将被设置为其内容的实际尺寸。

默认情况下，flex-basis 的值为 auto。

实例

以下示例演示了 flex-grow、flex-shrink 和 flex-basis 的用法：

<div class="flex-container">
  <div class="flex-item-1">Item 1</div>
  <div class="flex-item-2">Item 2</div>
  <div class="flex-item-3">Item 3</div>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-item-1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

.flex-item-2 {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 100px;
}

.flex-item-3 {
  flex-grow: 3;
  flex-shrink: 1;
  flex-basis: 100px;
}

在这个示例中，flex-container 是一个 flex 容器，它包含三个 flex 项目：flex-item-1、flex-item-2 和 flex-item-3。flex-item-1 的 flex-grow 值为 1，flex-shrink 值为 1，flex-basis 值为 100px。这意味着 flex-item-1 将扩展自身以填充可用空间，但不会超过其 flex-basis。flex-item-2 的 flex-grow 值为 2，flex-shrink 值为 1，flex-basis 值为 100px。这意味着 flex-item-2 将扩展自身以填充可用空间，但不会超过其 flex-basis。flex-item-3 的 flex-grow 值为 3，flex-shrink 值为 1，flex-basis 值为 100px。这意味着 flex-item-3 将扩展自身以填充可用空间，但不会超过其 flex-basis。

当 flex-container 的宽度为 600px 时，三个 flex 项目的宽度如下：