CSS - flex-shrink 属性

CSS flex-shrink 属性控制当 flex 容器空间不足时，flex 项目相对于彼此如何收缩。为了使属性显示其效果，元素必须具有灵活性。

语法

flex-shrink: number | initial | inherit;

属性值

值	描述
数字	指定元素相对于其他 flex 项目收缩多少的数字。默认值为 1。
初始	这将属性设置为其默认值。
继承	这从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Flex Shrink 属性示例

以下示例使用不同的值解释了 flex-shrink 属性。

使用数值的 Flex Shrink 属性

为了让元素在容器空间不足时相对于其他 flex 元素收缩，我们可以在数值中指定收缩因子（例如 2、3、4 等）。以下示例显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgray;
         width: 100%;
      }

      .flex-container div {
         color: white;
         background-color: #4CAF50;
         padding: 5px;
         margin: 5px;
         height: 50px;
         flex-basis: 100px;
      }

      .flex-item1 {
         flex-shrink: 3;
      }

      .flex-item2 {
         flex-shrink: 4.5;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-shrink property
   </h2>
   <h4>
      flex-shrink: 3 (flex item2, flex item4),
      4.5 (flex item6)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div class="flex-item1">
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
      <div class="flex-item1">
         Flex item 4
      </div>
      <div>
         Flex item 5
      </div>
      <div class="flex-item2">
         Flex item 6
      </div>
   </div>
</body>

</html>

使用初始值的 Flex Shrink 属性

initial 值将收缩因子设置为默认值，在本例中为 1。因此，使用此值的项目将按比例收缩。以下示例显示了这一点。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgray;
         width: 100%;
      }

      .flex-container div {
         color: white;
         background-color: #4CAF50;
         padding: 5px;
         margin: 5px;
         height: 50px;
         flex-basis: 100px;
      }

      .flex-item1 {
         flex-shrink: initial;
      }

      .flex-item2 {
         flex-shrink: 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-shrink property
   </h2>
   <h4>
      flex-shrink: initial (flex item2, flex item4),
      4 (flex item6)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div class="flex-item1">
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
      <div class="flex-item1">
         Flex item 4
      </div>
      <div>
         Flex item 5
      </div>
      <div class="flex-item2">
         Flex item 6
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
flex-shrink	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

打印页面