MDN之Web 開發技術【flex】

CSS屬性 flex 規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。這是一個簡寫屬性，用來設置 flex-grow, flex-shrink 與 flex-basis。

大多數情況下，開發者需要將 flex 設置爲 auto，initial，none，或一個無單位正數。嘗試調整下面的 flex 容器以觀察這些值的作用:

默認情況下，元素不會縮短至小於內容框尺寸，若想改變這一狀況，請設置元素的min-width 與 min-height屬性。

語法

/* Basic values */
flex: auto;
flex: initial;
flex: none;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

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

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

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

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

flex 屬性可以指定1個，2個或3個值。

單值語法: 值必須爲以下其中之一:

• 一個無單位數(<number>): 它會被當作<flex-grow>的值。
• 一個有效的寬度(width)值: 它會被當作 <flex-basis>的值。
• 關鍵字none，auto或initial.

雙值語法: 第一個值必須爲一個無單位數，並且它會被當作 <flex-grow> 的值。第二個值必須爲以下之一：

• 一個無單位數：它會被當作 <flex-shrink> 的值。

• 一個有效的寬度值: 它會被當作 <flex-basis> 的值。

三值語法:

• 第一個值必須爲一個無單位數，並且它會被當作 <flex-grow> 的值。
• 第二個值必須爲一個無單位數，並且它會被當作 <flex-shrink> 的值。
• 第三個值必須爲一個有效的寬度值， 並且它會被當作 <flex-basis> 的值。

取值

initial

元素會根據自身寬高設置尺寸。它會縮短自身以適應 flex 容器，但不會伸長並吸收 flex 容器中的額外自由空間來適應 flex 容器 。相當於將屬性設置爲"flex: 0 1 auto"。

auto

元素會根據自身的寬度與高度來確定尺寸，但是會伸長並吸收 flex 容器中額外的自由空間，也會縮短自身來適應 flex 容器。這相當於將屬性設置爲 “flex: 1 1 auto”.

none

元素會根據自身寬高來設置尺寸。它是完全非彈性的：既不會縮短，也不會伸長來適應 flex 容器。相當於將屬性設置爲"flex: 0 0 auto"。

<'flex-grow'>

定義 flex 元素的 flex-grow 屬性，詳見 。默認值爲 0，負值無效。

<'flex-shrink'>

定義 flex 元素的 flex-shrink 屬性，詳見 。默認值爲1，負值無效。

<'flex-basis'>

定義 flex 元素的 flex-basis 屬性。若值爲0，則必須加上單位，以免被視作伸縮性。 默認值爲 auto。
當使用一個或兩個無單位數時, flex-basis會從auto變爲0. 可以參考 Flexible Box Layout Module 草案來了解更多信息。

正式語法

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

示例

#flex-container {
  display: flex;
  flex-direction: row;
}

#flex-container > .flex-item {
  flex: auto;
}

#flex-container > .raw-item {
  width: 5rem;
}

<div id="flex-container">
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

Result