CSS - flex-shrink 屬性

CSS flex-shrink 屬性控制當 flex 容器空間不足時，flex 專案相對於彼此如何收縮。為了使屬性顯示其效果，元素必須具有靈活性。

語法

flex-shrink: number | initial | inherit;

屬性值

值	描述
數字	指定元素相對於其他 flex 專案收縮多少的數字。預設值為 1。
初始	這將屬性設定為其預設值。
繼承	這從父元素繼承屬性。

CSS Flex Shrink 屬性示例

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

使用數值的 Flex Shrink 屬性

為了讓元素在容器空間不足時相對於其他 flex 元素收縮，我們可以在數值中指定收縮因子（例如 2、3、4 等）。以下示例顯示了這一點。

示例

<!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。因此，使用此值的專案將按比例收縮。以下示例顯示了這一點。

示例

<!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

列印頁面