前言

從Mdn搜尋 flex 屬性相關資料，會發現flex-direction跟flex-wrap會包含在flex裡頭，照前面說這兩者是針對 flex container 的屬性，
之所以跟flex item 無關是因為它們控制的是容器如何排列彈性元素（items），而不是控制彈性元素本身的樣式。

有這樣前提下，對接下來討論的flex會少一點疑惑。

Flex Item 主要屬性:

此「Flex」非彼flex

Flex排版特色在於彈性項目有「彈性(flex)」，藉由改變寬或高以符合可用空間，彈性容器依據各項目的彈性拉伸壓縮比例來分配空間。

flex屬性

flex 屬性是下列屬性的簡寫：

• flex-grow
• flex-shrink
• flex-basis

藉由對彈性項目宣告flex 屬性或其他三者（flex-grow、flex-shrink、flex-basis）來定義擴展或壓縮的係數。
若有剩餘的空間，可決定彈性項目擴展填滿或是保持不變；
要是沒有足夠空間，則可以決定彈性項目維持在宣告的大小或預設大小，也可以依比例壓縮來符合剩餘空間。

flex 屬性指定了元件的彈性長度（flexible length）：元素的「長度」是指彈性元素在主軸方向上的長度，當方框是彈性項目，是 flex 來決定盒子的主要尺寸大小，而不是由主要大小屬性( main size, 如：height 和 width )來決定。

flex 屬性的組成包含了彈性成長係數（flex growth factor）、彈性壓縮係數（flex shrink factor）及彈性基準（flex basis）。

而flex-grow、flex-shrink、flex-basis這三者屬性我後面會詳述。

簡而言之，

• <flex-grow>
  定義彈性項目的彈性成長（擴展）。當負值時為無效；省略這個屬性時，預設值是 1。初始值為 0。
• <flex-shrink>
  定義彈性項目的彈性收縮。當負值時為無效；省略這個屬性時，預設值是 1。初始值為 1。
• <flex-basis>
  定義彈性項目的彈性基礎。省略這個屬性時，預設值為 0%。初始值為 auto。

「省略這個屬性時」可以參考單值語法與雙值語法

寫法

上面提到flex屬性寫法是：

flex: <flex-grow> <flex-shrink> <flex-basis>;
/* 順序不可更動 */
/* 也是三值語法 */

但不會每次都要求三種屬性值寫好寫滿，
所以出現僅單值語法、雙值語法以及三值語法，但通常建議避免省略寫法：

One-value syntax單值語法

• 情況一：
  flex: 2;
  2會是代表<flex-grow>

/* 實際展開後會是 */
flex: 2 1 0%;  
/* 所有瀏覽器的行為 */

• 情況二：
  flex: 100px;
  100px會代表<flex-basis>

/* 實際展開後會是 */
flex: 1 1 100px;
/* 這個項目可以放大、可以縮小，初始大小是 100px。 */

• 情況三：
  flex: none; (或其他預設關鍵字，如：initial、auto)
  詳細後面會介紹

flex: 0 0 auto;
/* 這個項目不放大、不縮小，大小由內容或其他屬性決定。 */

Two-value syntax雙值語法

規則：

• 第一個值必須是 <flex-grow>
• 第二個值有兩種可能：

1. 如果第二個是 <flex-shrink>
   （例如：flex: 2 1）

/* 實際展開後會是 */
flex: 2 1 0%;
/* flex-basic預設值為 0% */

2. 如果第二個是 <flex-basis>
   （例如：flex: 1 50px）

/* 實際展開後會是 */
flex: 1 1 50px;
/* flex-shrink預設值為1 */

Three-value syntax三值語法

一般來說，就是原本定義的寫法。

flex 基礎屬性值

後來引申出幾個常見的 flex 預設基礎設定值，作為預設快捷值/關鍵字（keywords）。

flex: initial

等同於 flex: 0 1 auto ;
彈性物品不會增長，但可以縮小。項目的大小會根據其寬度或高度屬性而定，這取決於彈性方向。如果沒有多餘空間，項目將縮小到其最小尺寸以適合容器內，但不會增長以吸收彈性容器中任何可用的空間。

flex: auto

等同於 flex: 1 1 auto ;
彈性物品可以增長和縮小。項目的大小會根據其寬度或高度屬性而定，視撓性方向而定，但會成長以吸收撓性容器中可用的空間，或在不足空間的情況下縮小至其最小大小以適合容器。

flex: none

等同於 flex: 0 0 auto ;
彈性項目既不會增長也不會縮小。項目的大小會根據其寬度或高度屬性而定，這取決於彈性容器的方向。

flex: 1

等同於 flex: 1 1 0% ;
彈性項目的主要大小將與設定的數字成正比。這會將 flex-basis 設定為零，並使彈性項目具有彈性。該物品的寬度或高度將至少與其最小尺寸一樣，容器的正可用空間將根據該物品及其同級彈性物品的增長因素按比例分配。如果所有彈性項目都使用此模式，則所有項目的大小都將與其數值成比例。

參考資料

CSS Flexible Box Layout Module Level 1 - 7.1.

Mdn : Flex

W3school - CSS order Property