CSS: Flexbox

筆記資源整理

Flexbox 有分外容器(flex container) & 內容器(flex items)
Flex 開始使用前必須在外容器宣告 display: flex;

外容器

flex-direction

有分 row(預設), column 以及各自的 reverse

flex-wrap

有分 nowrap(預設), wrap, wrap-reverse

flex-flow

flex-direction & flex-wrap 合在一起的寫法

justify-content

有分 flex-start(預設), flex-end, center, space-between, space-around

align-items

和 justify-content 方向不同，有分 flex-start(預設), flex-end, center, stretch, baseline

align-content

是 align-items 的多行版本，排列方式基於整個區塊，有分 flex-start(預設), flex-end, center, space-between, space-around, stretch

🔖 補充說明：align-content 決定行之間的間隔，而 align-items 決定元素整體在容器的什麼位置。只有一行的時候 align-content 沒有任何效果。

內容器

flex-grow

一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。

flex-shrink

一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 1，如果設置為 0 則不會縮放。

flex-basis

元件的基準值，可使用不同的單位值。

flex

flex-grow & flex-shrink & flex basis合在一起的寫法

order

可以重新定義元件的排列順序，順序會依據數值的大小排列，負數也可以。

align-self

可以調整內元件交錯軸的對齊設定，且可個別設定單一元件的值。

其他

外層包 display: flex; 內層寫 margin:auto;
即可以達到水平＋垂直致中效果。

參考資料：

1. A Complete Guide to Flexbox

A Complete Guide to Flexbox

2. 實例學習 Flexbox

3. 表格實作

4. 青蛙移動練習

Flexbox Froggy - A game for learning CSS flexbox

📐✏️ 📏

若有任何錯誤請在下方留言～🙏 Thanks!