#flex-shrink

定义了当没有足够空间的时候,元素如何压缩自身空间。

默认属性 flex-shrink: 1;

当主轴(横向轴)没有足够空间的时候,元素将按照扩展因子 1 来进行压缩,也将导致换行(折叠)其自身的内容。

flex-shrink: 0;

元素压缩:占用它所需要的宽且换行(折叠)自身的内容。同级元素将压缩给出目标元素足够的控件。

因为目标元素不换行(折叠)自身的内容,所以可能会导致 flexbox 容器的内容产生元素移除。

flex-shrink: 2;

因为 flex-shrink 的值是相对的,它的具体表现还取决于此元素的同级元素

在此例子中,绿色的元素占用了 100% 的宽度。此部分的空间将从它的两个同级元素中占用,并且占用被分成了 4份:

  • 四分之红色元素中获取(红色压缩四分之三)
  • 四分之黄色元素中获取(黄色压缩四分之一)