CSS 属性

CSS flex-shrink 属性指定弹性项目的弹性收缩因子。当 Flex 项目的组合尺寸大于 Flex 容器的尺寸时，项目将根据其 Flex-Shrink 值按比例缩小。

flex-shrink 通常与 flex-grow 和 flex-basis，通常使用flex 简写。

属性值

  • <number>: 任何有效的正数。负值无效。

适用范围

Flex 项目，包括流入伪元素。

语法

flex-shrink: <number>;

CSS flex-shrink: <number>

下面的示例演示了当 Flex 项目空间不足时，flex-shrink:2 属性将 Flex 项目比其他 Flex 项目缩小两倍弹性容器 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
      width: 500px;
   }
   .flex-container div {
      background-color: yellow;
      padding: 5px;
      margin: 5px;
      height: 50px;
      flex-basis: 100px;
   }
   .flex-item {
      flex-shrink: 2;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div class="flex-item">Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
   </div>
</body>
</html>