深入解析 CSS Flexbox

Flexbox 是一個 CSS3 的盒子模型 ( box model ),顧名思義它就是一個靈活的盒子 ( Flexible Box ),為什麼最近這個屬性才紅起來呢?最主要也是因為 CSS3 的規範終於普及 ( 或 IE 終於敗亡 ),加上行動裝置的發展促成了響應式布局興起,自適應長寬彈性相當大的 Flexbox 就趁勢而起了。

Flexbox 模型概念

第一步要來看 Flexbox 的盒子模型,根據 W3C 文章所描述,flex 的盒子模型如下圖所呈現,與一般的盒子模型不同的地方,在於 Flexbox 的盒子模型具有水平的起點與終點 ( main start、main end ),垂直的起點與終點 ( cross start、cross end ),水平軸與垂直軸 ( main axis、cross axis ),然後元素具有水平尺寸與垂直尺寸 ( main size、cross size ),這些都是相當重要的布局規畫。

深入解析 CSS Flexbox

Flexbox 屬性介紹

再來我們先看看 Flexbox 有哪些屬性,也可參考 W3C css3 flexbox css3-flexbox

  • display
  • flex-direction
  • justify-content
  • align-items
  • align-self
  • align-content
  • flex-wrap
  • order
  • flex



以上就是 Flexbox 的完整介紹,想不到一個 CSS3 的屬性,可以花費這麼大一篇來介紹,不過也因為有了這個新的屬性,讓在做 layout 的佈局又更加彈性囉!

有興趣瞧瞧其他新文章嗎?