CSS Flexbox 中的 flex-shrink 属性详解

在 CSS Flexbox 布局中，flex-shrink 属性定义了一个弹性盒子的缩小比例。当弹性盒子中的空间不足时，flex-shrink 属性会按照比例分配弹性盒子中的空间，以便适应其父容器的大小。

flex-shrink 的语法

flex-shrink 属性是一个非负整数，表示弹性盒子缩小的比例。默认值为 1，表示弹性盒子可以缩小，但是不会缩小到小于其内容的最小宽度或高度。

flex-shrink: ;

flex-shrink 的使用方法

flex-shrink 属性通常与 flex-grow 和 flex-basis 属性一起使用，它们共同定义了弹性盒子的尺寸和行为。

flex-grow 属性定义了弹性盒子在空间充足时的扩展比例，而 flex-basis 属性定义了弹性盒子的基准尺寸。

如果弹性盒子的尺寸超过了其父容器的尺寸，flex-shrink 属性会按照比例减小弹性盒子的尺寸，以适应父容器的大小。

flex-shrink 的示例代码

下面是一个简单的示例，展示了 flex-shrink 属性的使用方法：

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

// javascriptcn.com 代码示例
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  width: 400px;
  background-color: #f1f1f1;
}

.flex-item {
  flex-basis: 30%;
  background-color: #ccc;
  height: 100px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.item-1 {
  flex-grow: 1;
  flex-shrink: 1;
}

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

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

在上面的代码中，我们定义了一个名为 flex-container 的容器，其中包含了三个名为 flex-item 的子元素。我们使用 flex-wrap 属性将这些子元素包装到多行中，使用 justify-content 和 align-items 属性将它们水平和垂直居中。

我们使用 flex-basis 属性定义了每个子元素的基准尺寸，然后使用 flex-grow 和 flex-shrink 属性定义了它们的扩展和缩小比例。

在这个例子中，我们将第一个子元素的 flex-shrink 属性设置为 1，第二个子元素的 flex-shrink 属性设置为 2，第三个子元素的 flex-shrink 属性设置为 3。这意味着当它们的父容器尺寸不足时，第一个子元素将比其他子元素更少地缩小，第二个子元素将比其他子元素更多地缩小，而第三个子元素将比其他子元素更多地缩小。

总结

在 CSS Flexbox 布局中，flex-shrink 属性定义了一个弹性盒子的缩小比例。当弹性盒子中的空间不足时，flex-shrink 属性会按照比例分配弹性盒子中的空间，以便适应其父容器的大小。我们可以将其与 flex-grow 和 flex-basis 属性一起使用，以完全控制弹性盒子的尺寸和行为。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657167dcd2f5e1655da12f6e