1. Web
  2. CSS
  3. flex

flex

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

flex 這個 CSS 簡寫屬性用於設定彈性專案（flex item）如何增大或縮小以適應其彈性容器（flex container）中的可用空間。

試一試

flex: 1;

flex: 2;

flex: 1 30px;

flex: 1 1 100px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change me</div>
  <div>flex: 1</div>
  <div>flex: 1</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

構成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

css
/* Keyword value */
flex: none; /* 0 0 auto */

/* One value, unitless number: flex-grow
flex-basis is then equal to 0%. */
flex: 2; /* 2 1 0% */

/* One value, width/height: flex-basis */
flex: auto; /* 1 1 auto */
flex: 10em; /* 1 1 10em */
flex: 30%;
flex: min-content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px; /* 1 1 30px */

/* Two values: flex-grow | flex-shrink */
flex: 2 2; /* 2 2 0% */

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial; /* 0 1 auto */
flex: revert;
flex: revert-layer;
flex: unset;

flex 屬性可以使用一個、兩個或三個值來指定。

  • 單值語法：該值必須是以下之一：

    • 一個 <flex-grow> 的有效值：此時，在所有瀏覽器中，該簡寫會展開為 flex: <flex-grow> 1 0%。然而，規範中規定它應展開為 flex: <flex-grow> 1 0。
    • 一個 <flex-basis> 的有效值：此時，該簡寫會展開為 flex: 1 1 <flex-basis>。
    • 關鍵字 none 或某個全域性關鍵字。

  • 雙值語法

    • 第一個值必須是 flex-grow 的有效值。

    • 第二個值必須是以下之一：

      • 一個 flex-shrink 的有效值：此時，在所有瀏覽器中，該簡寫會展開為 flex: <flex-grow> <flex-shrink> 0%。
      • 一個 flex-basis 的有效值：此時，該簡寫會展開為 flex: <flex-grow> 1 <flex-basis>。

  • 三值語法：這些值必須按以下順序排列：

    1. 一個 flex-grow 的有效值。
    2. 一個 flex-shrink 的有效值。
    3. 一個 flex-basis 的有效值。

值

<'flex-grow'>

定義彈性專案的 flex-grow。負值無效。省略時預設為 1。（初始值為 0）

<'flex-shrink'>

定義彈性專案的 flex-shrink。負值無效。省略時預設為 1。（初始值為 1）

<'flex-basis'>

定義彈性專案的 flex-basis。省略時預設為 0%。初始值為 auto。

none

專案大小根據其 width 和 height 屬性確定。它是完全不靈活的：既不會相對於彈性容器縮小，也不會增大。這等同於設定 flex: 0 0 auto。

通常期望的 flexbox 效果可以透過使用以下 flex 值來實現：

  • initial：彈性專案不增長但可以收縮。此預設值展開為 flex: 0 1 auto。專案的大小根據其 width 或 height 屬性確定，具體取決於 flex-direction。如果存在負可用空間，專案將收縮到其最小尺寸以適應容器，但不會增長以吸收彈性容器中的任何正可用空間。

  • auto：彈性專案可以增長和收縮。此值展開為 flex: 1 1 auto。專案的大小根據其 width 或 height 屬性確定，具體取決於 flex-direction，但會增長以吸收彈性容器中的可用正空間，或在存在負空間的情況下收縮到其最小尺寸以適應容器。彈性專案是完全靈活的。

  • none：彈性專案既不增長也不收縮。此值展開為 flex: 0 0 auto。專案的大小根據其 width 或 height 屬性確定，具體取決於彈性容器的方向。彈性專案是完全不靈活的。

  • flex: <number [1,∞]>：彈性專案的主尺寸將與設定的數字成比例。此值展開為 flex: <number> 1 0。這將 flex-basis 設定為零，並使彈性專案變得靈活。專案至少會與其最小尺寸一樣寬或高，容器的正可用空間將根據此專案及其兄弟彈性專案的增長因子按比例分配。如果所有彈性專案都使用此模式，則所有專案的大小都將與其數值成比例。

    警告：當 flex 值中未指定 flex-basis 時，瀏覽器會使用 flex-basis 值 0%。這與規範所說的 flex-basis 值 0 不同。在某些情況下，這可能會影響 flex 佈局。請參閱 Flex-basis 0 與 0% 示例中演示的此效果。

描述

在大多數情況下，開發者應將 flex 設定為以下值之一：auto、initial、none 或一個正的無單位數字。要檢視這些值的效果，請嘗試調整下面彈性容器的大小：

預設情況下，彈性專案不會收縮到小於其min-content大小。要改變這一點，請設定專案的 min-width 或 min-height。

正式定義

初始值作為簡寫中的每個屬性
應用於彈性專案，包括在流中的偽元素
繼承性否
計算值作為簡寫中的每個屬性
動畫型別作為簡寫中的每個屬性

正式語法

flex = 
  none                                                |
  [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  

<flex-grow> = 
  <number [0,∞]>  

<flex-shrink> = 
  <number [0,∞]>  

<flex-basis> = 
  content    |
  <'width'>  

<width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

設定 flex: auto

此示例顯示了具有 flex: auto 的彈性專案如何增長以吸收容器中的任何可用空間。

HTML

html
<div id="flex-container">
  <div id="flex-auto">
    flex: auto (click to remove/add the `flex: initial` box)
  </div>
  <div id="default">flex: initial</div>
</div>

CSS

css
#flex-container {
  border: 2px dashed gray;
  display: flex;
}

#flex-auto {
  cursor: pointer;
  background-color: wheat;

  flex: auto;
}

#default {
  background-color: lightblue;
}

JavaScript

js
const flexAutoItem = document.getElementById("flex-auto");
const defaultItem = document.getElementById("default");
flexAutoItem.addEventListener("click", () => {
  defaultItem.style.display =
    defaultItem.style.display === "none" ? "block" : "none";
});

結果

彈性容器包含兩個彈性專案：

  • #flex-auto 專案的 flex 值為 auto。auto 值展開為 1 1 auto，即允許該專案擴充套件。
  • #default 專案沒有設定 flex 值，因此它預設為 initial 值。initial 值展開為 0 1 auto，即不允許該專案擴充套件。

#default 專案佔據其寬度所需的空間，但不會擴充套件以佔用更多空間。所有剩餘空間都由 #flex-auto 專案佔據。

當您單擊 #flex-auto 專案時，我們將其 #default 專案的 display 屬性設定為 none，從而將其從佈局中移除。然後，#flex-auto 專案會擴充套件以佔據容器中的所有可用空間。再次單擊 #flex-auto 專案會將 #default 專案重新添加回容器中。

規範

規範
CSS 彈性盒子佈局模組第 1 級
# flex-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者們更新。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.