屬性

• flex-grow
• flex-shrink
• flex
• flex-basis
• order
• align-self

Part 2 將從 flex-basis 開始介紹。

flex-basis

根據 flex-direction 判斷，如果 flex-direction: row，flex-basis 定義 flex item 的 width，如果是 flex-direction: column， flex-basis 定義 flex item 的 height。

flex-basis: auto，表示高度或寬度將依照內容表示。

flex-basis: 0，表示 height: 0 或是 width: 0，會將元素的寬度或高度為內容的最小寬度，如果又加上 overflow: hidden 或者元素是直接可調整大小的(像是 image)，width 或是 height 將會為 0。

以底下的 css 作範例，因為 flex-direction: row，顯示 flex-basis: 400px 表示第 3 個 div 的 width 為 400px。

CodePen 範例

.flex-container > div:nth-child(3) {
  flex-basis: 400px;
}

order

決定 flex item 的順序。order的預設值為 0，負數也可以用在 order，負愈大，愈前面。

CodePen 範例

align-self

定義 flex item 的對齊方式，屬性值和 align-items 一樣， 不過 align-self 會 overwrite flex container 的 align-items 屬性。

CodePen 範例

參考資料：
flex佈局中flex-grow 與flex-shrink 的詳細計算方式
[css] 搞懂 flex-grow, flex-shirk 及 flex-basis 三種屬性
The difference between flex-basis auto and 0 (zero)
CSS align-self Property