CSS面试：flex-grow、flex-shrink、flex-basisflex 属性本身是一个简写属性，用于设置以

flex 属性本身是一个简写属性，用于设置以下三个子属性：

flex-grow:
- 定义项目的放大比例，即当容器中有剩余空间时，项目将如何分配这些剩余空间。是对剩余空间的按比例分配。
- 默认值为 0，表示如果存在剩余空间，项目不会放大。
- 一个项目的 flex-grow 值越大，它分配的空间就越多。
flex-shrink:
- 定义项目的缩小比例，即当容器空间不足时，项目将如何缩小以适应容器。是对超出空间的按比例缩小。
- 默认值为 1，表示当容器空间不足时，项目将缩小。
- 一个项目的 flex-shrink 值越大，它缩小的程度就越大。
flex-basis:
- 定义项目在弹性容器中的初始主尺寸（即项目在主轴上的预设尺寸）。
- 可以设置具体的尺寸值（如 200px），也可以设置为 auto，表示项目的内容大小。
- flex-basis 优先级高于项目的宽度或高度，如果设置了 flex-basis，则优先按照 flex-basis 来计算项目的大小。

flex: flex-grow flex-shrink flex-basis;

示例：

.item {
    flex: 1 0 200px;
}

以上的 flex 简写属性等价于：

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 200px;
}

这表示这个项目会尝试占据 200px 的空间，如果有剩余空间，它可以放大，若有不足，它不会缩小。

总结

0:
- 项目不会增长，即使容器中有剩余空间，项目的大小也不会改变。
正数（例如 1, 2, 3 等）:
- 定义项目的增长比例。
- 如果多个项目的 flex-grow 值不同，则容器中的剩余空间按这些值的比例分配给项目。
- 例如，若某项目的 flex-grow 为 2，另一个项目为 1，则前者将分配到双倍于后者的剩余空间。
负值:
- flex-grow 属性不接受负值。设置为负值无效，通常会被视为 0。

示例：

假设有一个包含三个项目的弹性容器，容器有 600px 的可用宽度，所有项目的初始宽度为 100px，即总共占用 300px。容器还剩余 300px 的空间。

.container {
    display: flex;
    width: 600px;
}

.item1 {
    flex-grow: 1;
}

.item2 {
    flex-grow: 2;
}

.item3 {
    flex-grow: 3;
}

item1 的 flex-grow 值为 1，它将获得 300px 中的 1/(1+2+3)，即 1/6 的剩余空间，分配到 50px。
item2 的 flex-grow 值为 2，它将获得 2/6 的剩余空间，即 100px。
item3 的 flex-grow 值为 3，它将获得 3/6 的剩余空间，即 150px。

最终，item1, item2, 和 item3 的宽度将分别为 150px, 200px, 和 250px。

0:
- 项目不会缩小，即使容器空间不足，项目的大小也不会改变。
正数（例如 1, 2, 3 等）:
- 定义项目的缩小比例。
- 如果多个项目的 flex-shrink 值不同，则容器空间不足时，项目将按照这些值的比例缩小。
- 例如，如果一个项目的 flex-shrink 为 2，另一个项目为 1，则前者的缩小速度是后者的两倍。
负值:
- flex-shrink 属性不接受负值，设置为负值无效，通常会被视为 0。

示例：

假设有一个包含三个项目的弹性容器，容器的总宽度为 500px，所有项目的初始宽度为 200px，即总共占用 600px。容器的空间不足，需要缩小每个项目的宽度。

.container {
    display: flex;
    width: 500px;
}

.item1 {
    flex-shrink: 1;
}

.item2 {
    flex-shrink: 2;
}

.item3 {
    flex-shrink: 3;
}

假设容器的总宽度为 500px，而初始总宽度为 600px，则需要缩小 100px。

最终，item1, item2, 和 item3 的宽度将分别为 183.33px, 166.67px, 和 150px。

总结：

CSS面试：flex-grow、flex-shrink、flex-basis