Flexbox 布局的「大家族」：flex-grow、 flex-shrink 和 flex-basis-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 是一种强大的布局方式，它可以让我们轻松地在页面上实现各种布局效果。在 Flexbox 中，经常用到的三个属性分别是 flex-grow、 flex-shrink 和 flex-basis。本文将详细讲解这三个属性的作用，以及如何使用它们来实现各种布局效果。

flex-grow

flex-grow 属性定义项目在空间有剩余时的放大比例，默认值为 0。这意味着当容器中的项目没有占满可用空间时，项目不会自动拉伸来填满空间。

当 flex-grow 属性设置为 1 时，它将占用所有可用空间，并且不同项目的 flex-grow 值会决定它们在可用空间内的大小比例。比如，如果一个项目的 flex-grow 值为 2，另一个项目的值为 1，则前者将占用后者的两倍的空间。

以下是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

<style>
.container {
  display: flex;
  height: 200px;
}

.box {
  background: yellow;
  border: 1px solid black;
}

.box1 {
  flex-grow: 2;
}

.box2 {
  flex-grow: 1;
}

.box3 {
  flex-grow: 1;
}
</style>

在这个例子中，我们定义了一个包含三个项目的容器，然后设置了各个项目的 flex-grow 值。由于 .box1 的 flex-grow 值为 2，而其他项目的值为 1，因此 .box1 会占用比其他项目更多的空间。

flex-shrink

flex-shrink 属性定义项目在空间不足时的缩小比例，默认值为 1。这意味着当容器中的项目超过了可用空间时，它们将自动缩小以适应可用空间。

当 flex-shrink 属性设置为 0 时，项目不会自动缩小。当设置为一个大于 0 的值时，项目会根据其在可用空间内的大小来计算缩小比例。比如，一个项目的宽度为 200px，在可用空间内有 100px 的空间，且 flex-shrink 值为 2，则该项目将缩小到 150px，即原来的 75%。

以下是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

<style>
.container {
  display: flex;
  height: 200px;
  max-width: 400px;
}

.box {
  background: yellow;
  border: 1px solid black;
}

.box1 {
  flex-shrink: 1;
}

.box2 {
  flex-shrink: 2;
}

.box3 {
  flex-shrink: 0;
  width: 100px;
}
</style>

在这个例子中，我们定义了一个包含三个项目的容器，并设置了容器的最大宽度为 400px。由于 .box3 的 flex-shrink 值为 0，它将不会随着可用空间的减少而自动缩小。而 .box1 和 .box2 的 flex-shrink 值为 1 和 2，它们将根据自己在可用空间内的大小计算缩小比例，以便适应可用空间。

flex-basis

flex-basis 属性定义项目的初始大小，默认值为 auto。在 Flexbox 中，flex-basis 属性通常与 width 或 height 属性一起使用，以定义项目在 Flexbox 中的初始大小。

当 flex-basis 属性设置为一个固定值时，项目将始终以该值为准进行布局。当设置为一个百分比时，项目的大小将基于容器的大小进行计算。当设置为 auto 时，项目将根据其内容大小进行布局。

以下是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

<style>
.container {
  display: flex;
  height: 200px;
  max-width: 400px;
}

.box {
  background: yellow;
  border: 1px solid black;
}

.box1 {
  flex-basis: 150px;
}

.box2 {
  flex-basis: 50%;
}

.box3 {
  flex-basis: auto;
  width: 100px;
}
</style>

在这个例子中，我们定义了一个包含三个项目的容器，并设置了各个项目的 flex-basis 值。由于 .box1 的 flex-basis 值为 150px，它将始终占用这么大的空间。.box2 的 flex-basis 值为 50%，则它的大小将根据容器大小计算出来。.box3 的 flex-basis 值为 auto，它将根据自己的内容大小进行布局。

总结

flex-grow、 flex-shrink 和 flex-basis 分别用于定义项目的放大、缩小和初始大小，是 Flexbox 布局中最常用的属性之一。通过灵活地使用这些属性，我们可以轻松实现各种布局效果。希望这篇文章对你有帮助，并能在实际项目中得到应用。

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