###### tags:`ALPHACampWeek8_學期2-2` flex特性(flex-basis,grow,shirnk) === flex-basis：分配寬度 --- flex-basis 可以控制 item 在容器裡佔的寬度，在這裡我們使用百分比，就是以容器的寬度為 100%。 由於我們希望 52 張牌能以 4*13 排列，每一橫列要有 13 張卡片，100 / 13 = 7.7，這裡暫時抓 7% 的比例，剩餘一點空隙就當成 margin。 所以每一張卡片會佔用容器寬度的 7%。 flex-grow：分配剩餘空間 --- - https://codepen.io/ks0dcongra/pen/popyzKM 設定好 flex-basis 以後，還會剩下一些空隙，這時候可以用 flex-grow 來設定如何分配剩餘空間。 在這裡我們設定 0，意思是不要分配剩餘空間。 如果是 1 或 1 以上的數字，這個元素會佔用剩餘的空間，並且根據你設定的數字大小來彈性調整分配方式。flex-grow: 1 代表平分，若是 flex-grow: 2 代表中間佔用的空間會是右邊的兩倍，這些加權是為了處理更精細的視覺效果，對 CSS 刻版有興趣的同學可以再深入研究 flexbox 的博大精深。 你可以參考這個 CodePen 來研究。 flex-shrink：空間不足如何收縮 --- - https://codepen.io/ks0dcongra/pen/WNdweym 如果視窗變小，flex item 就需要收縮，減少自己所佔的空間，而 flex-shrink。 這裡我們設定 1，我們想讓元素等比例收縮；如果設定比 1 更高的數字，代表我們要深入控制每個元素的收縮比例。 要深入研究的話，請參考這個 CodePen 範例，在這裡父母元素的寬度是 500 px，子元素們加起來是 600 px ，等於溢出了 100 px ，而因為 flex-shrink 預設為 1，因此每個元素會縮小同比例來補足這 100 px。 如果你為各個元素設定不同的 flex-shrink，收縮比例會產生變化。在範列中用 JavaScript 動態輸出比例數字，讓你可以進行觀察。 flex-shrink 和 flex-grow 讓你可以在設計 RWD 佈局時，在 width 固定的情況下，進行更深入的控制。 height:Xvw 高度與寬度等比例縮放 --- 由於卡片的寬度根據容器寬度變化，卡片高度也需要等比例變化，容器寬度的預設值為視窗大小，所以這裡我們把卡片高度設定為 8vw，代表視窗大小的 8%。這樣就寬高就能等比例的變化。