CSS - flex 屬性

CSS flex 是一個簡寫屬性，用於定義屬性 flex-grow、flex-shrink 和 flex-basis 的值。它定義了彈性專案如何增長、收縮以及在彈性容器中分配空間。為了使該屬性生效，元素必須是彈性專案。

語法

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

屬性值

值	描述
flex-grow	一個數字，指定專案相對於其他彈性專案的增長程度。
flex-shrink	一個數字，指定專案相對於其他彈性專案的收縮程度。
flex-basis	它指定專案的長度，使用長度值（例如 auto、%、px、em 等）。
auto	專案的大小由其 width 和 height 屬性決定，擴充套件以填充彈性容器中的額外空間，並收縮到其最小尺寸以適應容器。它等效於 flex: 1 1 auto。
none	專案的大小保持固定，並且當彈性容器的尺寸發生變化時不會擴充套件或收縮。它等效於 flex: 0 0 auto。
initial	專案根據其 width 和 height 屬性進行大小調整。它等效於 flex: 0 1 auto。
inherit	它從父元素繼承該屬性。

CSS Flex 屬性示例

以下示例說明了使用不同值的 flex 屬性。

定義 Flex 屬性的所有值

flex 屬性是屬性 flex-grow、flex-shrink 和 flex-basis 的組合，可以在一條語句中為所有這些屬性提供值。元素將相應調整。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         height: 100px;
         border: 1px solid black;
      }

      .item {
         border: 3px solid grey;
         padding: 10px;
         color: white;
         text-align: center;
      }

      .item1 {
         flex: 1 1 100px;
         background-color: lightblue;
      }

      .item2 {
         flex: 2 1 150px;
         background-color: lightgreen;
      }

      .item3 {
         flex: 1 2 200px;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: flex-grow flex-shrink flex-basis
   </h4>
   <div class="container">
      <div class="item item1">
         Item 1
      </div>
      <div class="item item2">
         Item 2
      </div>
      <div class="item item3">
         Item 3
      </div>
   </div>
</body>

</html>

使用單個值的 Flex 屬性

我們還可以為 flex 屬性提供一個整數。此值設定元素的 flex-grow 係數，使其相對於其他彈性專案增長。flex-shrink 和 flex-basis 屬性分別預設為 1 和 auto。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         text-align: center;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
      }

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

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: 2 (The second item takes up 2x
      the space of the other flex items)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div class="flex-item2">
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

使用 Auto 值的 Flex 屬性

為了讓彈性專案均勻增長和收縮以填充容器的可用空間，我們使用 auto 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
         flex: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: auto (all items fill the available
      container space)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div>
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

使用 None 值的 Flex 屬性

為了防止彈性專案均勻增長和收縮以填充容器的可用空間，我們使用 none 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         background-color: lightgrey;
      }

      .flex-container>div {
         color: white;
         background-color: #4CAF50;
         margin: 10px;
         padding: 15px;
         flex: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex property
   </h2>
   <h4>
      flex: none (all items' size remains fixed)
   </h4>
   <div class="flex-container">
      <div>
         Flex item 1
      </div>
      <div>
         Flex item 2
      </div>
      <div>
         Flex item 3
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
flex	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

列印頁面