css弹性盒flex-grow、flex-shrink、flex-basis详解

我们来详细讲解一下 CSS 弹性盒子模型中的 flex-grow、flex-shrink 和 flex-basis 属性。

弹性盒子模型介绍

CSS 弹性盒子模型（Flexbox）是一种基于浏览器的布局模式，使开发人员可以更加方便、灵活地设计和排列元素。通过指定容器中的弹性盒子的布局方式、方向、对齐方式、大小等属性，可以实现各种复杂的布局效果。

flex-grow 属性

flex-grow 属性用于指定弹性盒子项目的放大比例，即在容器元素大小发生改变时，弹性盒子项目大小发生的比例。flex-grow 值为一个非负数，表示弹性盒子项目在放大时的比例。

比如，当弹性盒子容器的宽度为 400px，其中有三个项目分别是 100px、150px、250px，flex-grow 属性值分别为 1、2、3。则容器中每个项目的大小分别为 100px、150px、250px，剩余的空间（400-100-150-250=0）按照比例分配，分别占用 100px、150px、250px，总共占用 500px，超出容器的部分会溢出。

下面是一个示例代码：

<div class="flex-container">
  <div class="item item1">Flex Item 1</div>
  <div class="item item2">Flex Item 2</div>
  <div class="item item3">Flex Item 3</div>
</div>

.flex-container {
  display: flex;
}
.item {
  height: 100px;
  margin: 10px;
  color: #fff;
  text-align: center;
  font-size: 28px;
  line-height: 100px;
}
.item1 {
  background-color: #f44336;
  flex-grow: 1;
}
.item2 {
  background-color: #4caf50;
  flex-grow: 2;
}
.item3 {
  background-color: #2196f3;
  flex-grow: 3;
}

flex-shrink 属性

flex-shrink 属性用于指定弹性盒子项目的缩小比例，即在容器元素大小发生减小时，弹性盒子项目大小发生的比例。flex-shrink 值为一个非负数，表示弹性盒子项目在缩小时的比例。

比如，当弹性盒子容器的宽度为 600px，其中有两个项目分别是 400px、500px，它们的 flex-shrink 属性值分别为 1、2。则弹性盒子容器宽度缩小到 500px 时，项目的宽度分别变为 285px（400-60）和 357px（500-60），其中“60”是剩余空间的比例（计算方式：(4001+5002)/(1+2)=233.3333，两个项目的总体缩小量为 233.33333=700，剩余空间为 600-500=100，总体缩小量与剩余空间的比例为 700/100=7，因此每个项目缩小的比例为 (1/3)7=2.3333，即 2.3333*30=69.9999，约等于 70）。

下面是一个示例代码：

<div class="flex-container">
  <div class="item item1">Flex Item 1</div>
  <div class="item item2">Flex Item 2</div>
</div>

.flex-container {
  display: flex;
}
.item {
  height: 150px;
  margin: 10px;
  color: #fff;
  text-align: center;
  font-size: 28px;
  line-height: 150px;
}
.item1 {
  background-color: #f44336;
  flex-shrink: 1;
}
.item2 {
  background-color: #4caf50;
  flex-shrink: 2;
}

flex-basis 属性

flex-basis 属性用于指定弹性盒子项目的初始大小，即在容器元素大小未发生改变时，弹性盒子项目的大小。flex-basis 值为一个长度或百分比值，表示弹性盒子项目在初始状态下的大小。

比如，当弹性盒子容器的宽度为 400px，其中一个项目的 flex-basis 值为 200px。则在容器的宽度小于等于 200px 时，该项目的大小会保持不变；在容器的宽度超过 200px 时，该项目的大小会随着 flex-grow 属性相应地增大，但不会超过其指定的最大值。

下面是一个示例代码：

<div class="flex-container">
  <div class="item item1">Flex Item 1</div>
  <div class="item item2">Flex Item 2</div>
  <div class="item item3">Flex Item 3</div>
</div>

.flex-container {
  display: flex;
}
.item {
  height: 100px;
  margin: 10px;
  color: #fff;
  text-align: center;
  font-size: 28px;
  line-height: 100px;
}
.item1 {
  background-color: #f44336;
  flex-basis: 200px;
}
.item2 {
  background-color: #4caf50;
  flex-grow: 1;
}
.item3 {
  background-color: #2196f3;
  flex-grow: 2;
}

以上就是关于 CSS 弹性盒子模型中 flex-grow、flex-shrink 和 flex-basis 属性的详细介绍和示例说明。希望对您有所帮助！