新! 我的 44 页电子书“44 分钟内掌握 CSS”已出版! 😃

立即获取 →

#flex-shrink

定义了如果没有足够的空间,Flexbox 项目应该缩小多少。

默认 flex-shrink: 1;

如果容器主轴没有足够的空间,则元素将按1的系数缩小,并会包裹其内容。

flex-shrink: 0;

元素不会缩小:它会保留它需要的宽度,不会包裹其内容。它的兄弟元素会缩小以给目标元素腾出空间。

因为目标元素不会包裹其内容,所以 Flexbox 容器的内容有可能溢出

flex-shrink: 2;

因为 flex-shrink 值是相对的,所以它的行为取决于 Flexbox 项目兄弟元素的值。

在这个例子中,绿色项目想要填充 100% 的宽度。它需要的空间是从它的两个兄弟元素那里取来的,并被分成4份。

  • 3/4 的空间是从红色项目那里取来的。
  • 1/4 的空间是从黄色项目那里取来的。