新! 我的 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 的空间是从黄色项目那里取来的。