Flexbox-CSS3彈性盒模型flexbox完整版教程

http://caibaojian.com/flexbox-guide.html

基礎知識

因爲flexbox是一個總體模塊，而不是單一的一個屬性，它涉及到了不少東西，包括它的整個屬性集。它們之中有一些是在父容器上設置，而有一些則是在子容器上設置。

若是常常佈局基於塊和內嵌流方向，柔性佈局基於「柔性流動方向」。請看看這個數字從規範，解釋背後的柔性佈局的主要思路。

屬性介紹

display: flex | inline-flex; (適用於父類容器元素上)

定義一個flex容器，內聯或者根據指定的值，來做用於下面的子類容器。

• box：將對象做爲彈性伸縮盒顯示。（伸縮盒最老版本）（css3）
• inline-box：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最老版本）（CSS3）
• flexbox：將對象做爲彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
• inline-flexbox：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒過渡版本）（CSS3）
• flex：將對象做爲彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）
• inline-flex：將對象做爲內聯塊級彈性伸縮盒顯示。（伸縮盒最新版本）（CSS3）

請注意：

1.css 列（CSS columns）在彈性盒子中不起做用

2.float, clear and vertical-align 在flex項目中不起做用

原文連接：Flexbox-CSS3彈性盒模型flexbox完整版教程 版權全部，轉載時請註明出處，違者必究。
註明出處格式：前端開發博客 (http://caibaojian.com/flexbox-guide.html)