One-value syntax:

Two-value syntax:

Three-value syntax:

 //must be in the following order:
 /* flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

我們先設定每一張卡片 (flex item) 如何分配容器的寬度，屬於設定寬度，flex 是一個縮寫，依序代表：

flex-basis: 7%;
flex-grow: 0;
flex-shrink: 1;
主要的寬度由 flex-basis 設定，剩下的 flex-grow 和 flex-shrink 是針對「空間有剩」或「空間不夠」等情況，設定元素如何縮放。

(編註：若仔細對照官方文件，會注意到 flex 縮寫的表定順序是 flex-grow → flex-shrink → flex-basis，不過因為 flex 是高容錯的設計，而這裡指定 7% 和 flex-shrink & flex-grow 預期吃到的參數格式不一樣，因此自動當成了 flex-basis 的值。對屬性順序規範想深入研究的同學可參考 TD 助教的詳解。)

flex-basis：分配寬度
flex-basis 可以控制 item 在容器裡佔的寬度，在這裡我們使用百分比，就是以容器的寬度為 100%。

由於我們希望 52 張牌能以 4*13 排列，每一橫列要有 13 張卡片，100 / 13 = 7.7，這裡暫時抓 7% 的比例，剩餘一點空隙就當成 margin。

所以每一張卡片會佔用容器寬度的 7%。

flex-grow：分配剩餘空間
設定好 flex-basis 以後，還會剩下一些空隙，這時候可以用 flex-grow 來設定如何分配剩餘空間。

在這裡我們設定 0，意思是不要分配剩餘空間。

如果是 1 或 1 以上的數字，這個元素會佔用剩餘的空間，並且根據你設定的數字大小來彈性調整分配方式。flex-grow: 1 代表平分，
若是 flex-grow: 2 代表中間佔用的空間會是1的兩倍，這些加權是為了處理更精細的視覺效果
參考這個 CodePen 來研究。

flex-shrink：空間不足如何收縮收縮比例
如果視窗變小，flex item 就需要收縮，減少自己所佔的空間。
設定 1，想讓元素等比例收縮；
如果設定比 1 更高的數字，代表我們要深入控制每個元素的收縮比例。?

要深入研究的話，請參考這個 CodePen 範例，在這裡父母元素的寬度是 500 px，子元素們加起來是 600 px ，等於溢出了 100 px ，而因為 flex-shrink 預設為 1，因此每個元素會縮小同比例來補足這 100 px。

如果你為各個元素設定不同的 flex-shrink，收縮比例會產生變化。在範列中用 JavaScript 動態輸出比例數字，讓你可以進行觀察。

flex-shrink 和 flex-grow 讓你可以在設計 RWD 佈局時，在 width 固定的情況下，進行更深入的控制。

.card img {
  max-width: 30%;
  align-self: center; //flex 的單個子元素上
}

`align-self: center`

用在單個 FLEX-ITEM
用在 grid or flex 的單個子元素上

W3S align-self
Specifies the alignment for a flex item (overrides the flex container's align-items property)
Note: The align-self property overrides the grid or flexible container's align-items property.

align-self 属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。