用抽象二維座標系理解 Flexbox

[futianshen]

什麼是 Flexbox ?

為什麼要使用 Flexbox ？

如果不使用 Flexbox ?

在 Flexbox 出現之前是怎麼排版的？

table （已過時） float grid

如何使用 Flexbox ？

選定範圍，訂定座標，調整順序，改變位置。

1. 定義一個 Flexbox 容器

display: flex default 原點在容器左上角，橫軸為 X 、縱軸為 Y ，容器內元素的排列順序為 0 -> ∞ 。

2. 訂定原點與座標軸（X, Y）

flex-flow: = flex-direction: + flex-wrap:

flex-direction: 座標方向

• row（default)
• row-reverse 相對於default X 軸方向相反
• column 相對於default X Y 軸互換
• column-reverse 相對於default X Y 軸互換 X 軸方向相反

flex-wrap: 分行

• nowrap（default 不分行)
• wrap 分行
• wrap-reverse 分行、相對於default Y 軸方向相反

依據以上可分為八種情況（ Box Model 4角 * 2 座標軸交換）

原點	橫軸為 X 、縱軸為 Y	橫軸為 Y 、縱軸為 X
左上角	flex-flow: row wrap（default)	flex-flow: column wrap
左下角	flex-flow: row wrap-reverse	flex-flow: column-reverse wrap
右上角	flex-flow: row-reverse wrap	flex-flow: column wrap-reverse
右下角	flex-flow: row-reverse wrap-reverse	flex-flow: column-reverse wrap-reverse

---

3. 調整 Class 的先後順序

order: 改變 Flexbox 內「單一 Class」的先後順序

• number （default is 0)

4-1. 改變 Flexbox 內元素，在 X 軸上的位置分佈

justify-content:

• flex-start（default)
• flex-end
• center
• space-between
• space-around

4-2. 改變 Flexbox 內元素，在 Y 軸上的位置分佈

align-items: 改變 Flexbox 內 「所有元素」 相對於容器的位置 align-self: 改變 Flexbox 內 「單一 Class」 相對於容器的位置

• flex-start （default )
• flex-end
• center
• baseline （沒使用過）
• stretch （沒使用過）

align-content: 改變 Flexbox 內「行與行之間」相對於容器的位置 （使用條件：flex-wrap不為nowrap）

• stretch（default)
• flex-start
• flex-end
• center
• space-between
• space-around

如何幫助理解

把圖畫出來

參考資料

FLEXBOX FROGGY 簡單介紹 CSS Flexbox