突破局限，深究Flex布局中的flex-grow、flex-shrink和flex-basis

Flex布局三剑客

Flex布局的核心在于其三大属性：flex-grow、flex-shrink和flex-basis。这些属性共同决定了子元素在Flex容器中的分配方式，以及它们对剩余空间的反应。

flex-grow

flex-grow属性定义了子元素在分配剩余空间时的增长比率。当父元素空间充足时，flex-grow较大的子元素将获得更多的空间，而flex-grow较小的子元素则获得较少空间。

flex-shrink

flex-shrink属性定义了子元素在空间不足时的收缩比率。当父元素空间不足时，flex-shrink较大的子元素将首先被压缩，而flex-shrink较小的子元素则保持原状。

flex-basis

flex-basis属性定义了子元素在分配空间之前的初始大小。当父元素空间充足时，子元素将以flex-basis作为其初始大小，然后再根据flex-grow和flex-shrink属性进行调整。

实例解析

为了更好地理解Flex布局三剑客，我们来看一个实际例子。假设我们有一个Flex容器，其中包含三个子元素：A、B和C。我们对这三个子元素分别设置了flex-grow、flex-shrink和flex-basis属性，如下所示：

.container {
  display: flex;
}

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

.b {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 200px;
}

.c {
  flex-grow: 3;
  flex-shrink: 3;
  flex-basis: 300px;
}

当父元素空间充足时，三个子元素将根据flex-grow属性分配剩余空间。由于B的flex-grow为2，C的flex-grow为3，因此B将获得2份空间，C将获得3份空间，A将获得1份空间。最终，三个子元素的宽度分别为200px、300px和100px。

当父元素空间不足时，三个子元素将根据flex-shrink属性进行收缩。由于B的flex-shrink为2，C的flex-shrink为3，因此B将被压缩2倍，C将被压缩3倍，A将保持原状。最终，三个子元素的宽度分别为100px、50px和0px。

注意事项

在使用Flex布局三剑客时，需要注意以下几点：

• flex-grow、flex-shrink和flex-basis属性只能用于Flex容器中的子元素。
• flex-grow和flex-shrink属性的值必须为非负整数。
• flex-basis属性的值可以是长度值（如px、em、rem等）或百分比值。
• 如果子元素的flex-grow和flex-shrink属性都为0，则该子元素将不会分配剩余空间或被压缩。

结语

flex-grow、flex-shrink和flex-basis是Flex布局中的重要属性，掌握这些属性的使用方法，可以让你在Flex布局中得心应手，轻松构建出响应式、灵活的布局结构。