flex-shrink

`flex-shrink` 是 CSS Flexbox 布局中的一个属性，用于控制弹性盒子项目在空间不足时的缩小比例。默认值为 1，表示当空间不足时，项目会等比例缩小以适应剩余空间。

具体来说，`flex-shrink` 属性可以接受一个非负整数值作为参数。这个值越大，表示该项目在缩小时所占比例就越大。如果一个项目的 `flex-shrink` 值为 0，表示该项目在空间不足时不会缩小。如果所有项目的 `flex-shrink` 值都为 0，空间不足时，这些项目也不会缩小。

以下是一个例子：

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

.item {
  flex-shrink: 1;
}

.item:nth-child(2) {
  flex-shrink: 2;
}

在这个例子中，`.container` 是一个使用 Flexbox 布局的容器，宽度为 300 像素。`.item` 是容器内的项目，其中第二个项目的 `flex-shrink` 值为 2，其余项目都为 1。如果容器内的空间不足以容纳所有项目，第二个项目会优先缩小，其它项目等比例缩小。

相关问题

flex flex-shrink

Flex是一种CSS布局模型，用于创建灵活的、自适应的网页布局。它通过将容器内的子元素分配可用空间来实现弹性布局。而flex-shrink是flex属性的一个子属性，用于控制弹性容器中的项目在空间不足时如何收缩。

具体来说，flex-shrink属性定义了项目在空间不足时相对于其他项目的收缩比例。默认情况下，flex-shrink的值为1，表示项目将按比例收缩以适应容器的空间。如果一个项目的flex-shrink值为0，则该项目不会收缩。

举个例子，假设有一个容器宽度为500px，内部有三个子元素，分别设置了flex-shrink为1、2和0。当容器宽度不足以容纳所有子元素时，第一个子元素将收缩1份，第二个子元素将收缩2份，而第三个子元素不会收缩。

flex-grow和flex-shrink

Flex-grow和flex-shrink是flex布局中的两个属性。Flex-grow用于指定项目在剩余空间中的放大比例，而flex-shrink用于指定项目在空间不足时的缩小比例。[1]

当使用flex-grow时，一般是为了按比例分配布局。要同时设置flex-basis为0，以确保按比例分配。另外，可以使用flex:1来替代单独使用flex-grow，因为这种方式可以快速实现按比例分配布局。[1]

在flex属性中，flex:1相当于flex:1 1 0%。这三个值分别表示flex-grow、flex-shrink和flex-basis。需要注意的是，flex:1和只写一个flex-grow:1是不同的。写成flex:1时，flex-shrink和flex-basis的默认值分别为1和0%。而写成flex-grow:1时，flex-shrink和flex-basis的默认值分别为1和auto，即flex-basis是不同的。[2]

总结来说，flex-grow和flex-shrink是用于控制项目在剩余空间中的放大和缩小比例的属性。可以通过设置flex属性来同时指定这两个属性的值。[1][2]