Flexbox布局中的flex-grow与flex-shrink属性

# 1. 介绍

## 1.1 什么是Flexbox布局
Flexbox布局是一种用于创建灵活且自适应的页面布局的CSS模块。它提供了一套强大且灵活的布局工具，可以方便地调整元素的大小、位置和顺序，以实现多种复杂布局需求。

## 1.2 Flexbox布局的优势
相比传统的布局方式，Flexbox布局具有以下优势：
- 更简洁：Flexbox布局使用简单的属性设置，极大地降低了代码的复杂性和冗余性。
- 更灵活：Flexbox布局可以轻松地调整元素的大小和位置，适应不同屏幕尺寸和设备。
- 更适配：Flexbox布局可以适应不同的浏览器和设备，提供更好的兼容性。
- 更强大：Flexbox布局提供了强大的布局能力，可以实现复杂的布局需求，如等分容器空间、响应式布局等。

## 1.3 Flexbox布局的核心概念
在理解Flexbox布局的属性之前，了解几个核心概念是很重要的：
- 容器（Container）：使用Flexbox布局的元素称为容器，容器的属性会影响到内部的子元素。
- 项目（Item）：容器内部的子元素称为项目，项目的属性可以由容器的属性控制。
- 主轴（Main Axis）：Flexbox布局中的一个重要概念，决定了项目在水平方向上的排列方式。
- 交叉轴（Cross Axis）：Flexbox布局中的另一个重要概念，与主轴垂直交叉，决定了项目在垂直方向上的排列方式。

通过了解这些核心概念，我们可以更好地理解和使用Flexbox布局中的各种属性和值。在接下来的章节中，我们将详细介绍flex-grow和flex-shrink这两个属性，以及它们在Flexbox布局中的应用。

# 2. flex-grow属性

Flexbox布局中的`flex-grow`属性用于定义项目在容器中的伸缩比例。这个属性决定了项目在剩余空间按比例分配时的大小增长程度。具体来说，`flex-grow`属性指定了项目在空间分配中所占比例，它是一个非负数，默认值为0。

### 2.1 flex-grow的作用

`flex-grow`属性用于设置项目在容器中的伸展能力。当容器的剩余空间大于0时，所有的子项目的`flex-grow`属性值就会起作用，通过这个属性值的比例，决定它们在容器中所占比例的增加程度。如果设置为0，则不会伸展，而如果设置为大于0的值，则会按照比例伸展。

### 2.2 如何使用flex-grow属性

要使用`flex-grow`属性，需要将其应用于每个项目上。可以通过以下方式将`flex-grow`属性应用于项目：

.item {
  flex-grow: <number>;
}

### 2.3 flex-grow的取值及其影响

`flex-grow`属性的取值为非负整数，默认值为0。当设置为0时，项目不会伸展；当设置为大于0的数值时，项目会按照比例进行伸展。

值得注意的是，如果多个项目的`flex-grow`属性值相同，它们将以相等的比例进行伸展。如果其中一个项目的`flex-grow`属性值为2，而其他项目的属性值都为1，则前者将会获得更多的伸展空间。

# 3. flex-shrink属性

#### 3.1 flex-shrink的作用

在Flexbox布局中，flex-shrink属性用于定义项目在容器空间减少时的缩小比例。默认情况下，flex-shrink的值为1，表示项目将按比例缩小，以适应容器空间的减少。

#### 3.2 如何使用flex-shrink属性

要使用flex-shrink属性，需将其应用于项目上。可以通过设置项目的CSS属性来定义flex-shrink的值。例如：

.item {
  flex-shrink: 1;
}

上述代码将使项目具有默认的flex-shrink属性