CSS 参考手册 目录

CSS flex-shrink 属性

flex-shrink 属性定义了项目在必须缩小的情况下,相对于其他项目应该收缩的比例。默认值为 1,表示项目将根据需要缩小。

语法

------------ ---------
  • <number>: 一个数字,用于指定项目相对于其他项目应该收缩的比例。默认值为 1。

示例

假设有一个父容器,包含了三个子元素,并且设置了 display: flex;

---- ---------------
  ---- ------------------- -------
  ---- ------------------- -------
  ---- ------------------- -------
------
------- -
  -------- -----
-

------ -
  ------------ --
  ------- --- ----- ------
  -------- -----
-

在上面的示例中,三个子元素都设置了 flex-shrink: 1;,这意味着它们在必要时会等比例缩小。如果其中一个子元素的内容过多,导致父容器不够宽来容纳所有子元素,那么这三个子元素会根据各自的 flex-shrink 值来相应地缩小。

注意事项

  • flex-shrink 值为 0 时,表示项目不应该缩小。如果所有项目的 flex-shrink 值都为 0,即使父容器不够宽,项目也不会缩小。
  • flex-shrink 值为负数时,表示项目应该放大。通常情况下,我们不会使用负数作为 flex-shrink 的值。

以上就是关于 CSS 属性 flex-shrink 的介绍,希望能帮助你更好地理解和运用 Flexbox 布局。


上一篇:CSS 属性 flex-grow
下一篇:CSS 属性 flex-wrap