CSS flex-shrink 属性-之路教程

CSS flex-shrink 属性值说明

值	描述
number	指定该项目（item）（item）将相对于同一容器的其余部分缩小多少。默认值为1.
initial	将属性设置为默认值。
inherit	从其父元素继承此属性。

CSS flex-shrink 属性

flex-shrink 属性指定该项目（item）（item）相对于 flex 容器的其余项目（item）（item）将收缩多少。

如果项目（item）（item）的大小大于容器，项目（item）（item）会缩小以适应 flex 容器。
当 flex-shrink 属性未包含在 flex 简写声明中时，该值默认设置为 1.
如果没有弹性项目（item）（item），flex-shrink 属性不会有任何影响。

flex-shrink 属性是 CSS3 属性之一。

当负空间分布时，flex-shrink 因子乘以 flex-basis。

初始值	1
应用于	FlEX项目（item）（item），包括流中的伪元素。
继承	无效
可动画的	是的。FlEX项目（item）（item）是可以动画的。
版本	CSS3.
DOM 语法	object.style.flexshrink =“4”;

语法

flex-shrink: number | initial | inherit;

flex-shrink 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        width: 320px;
        height: 120px;
        border: 1px dotted #666666;
        display: -webkit-flex; /* Safari */
        display: flex;
      }
      .box div {
        -webkit-flex-grow: 1; /* Safari 6.1+ */
        -webkit-flex-shrink: 3; /* Safari 6.1+ */
        -webkit-flex-basis: 100px; /* Safari 6.1+ */
        flex-grow: 1;
        flex-shrink: 3;
        flex-basis: 100px;
      }
      .box div:nth-of-type(2) {
        -webkit-flex-shrink: 7; /* Safari 6.1+ */
        flex-shrink: 7;
      }
    </style>
  </head>
  <body>
    <h2>Flex-shrink 属性示例</h2>
    <div class="box">
      <div style="background-color: #eeeeee;"></div>
      <div style="background-color: #1c87c9;"></div>
      <div style="background-color: #8ebf42;"></div>
      <div style="background-color: #cccccc;"></div>
      <div style="background-color: #666666;"></div>
    </div>
  </body>
</html>

日期：2020-06-02 22:14:30 来源：oir作者：oir

←CSS flex-grow 属性

CSS flex-wrap 属性→

CSS flex-shrink 属性值说明

语法

flex-shrink 属性的示例：

目录