CSS3在布局方面做了非常大的改進(jìn)，使得我們對塊級元素的布局排列變得十分靈活，適應(yīng)性非常強(qiáng)，其強(qiáng)大的伸縮性，在響應(yīng)式開中可以發(fā)揮極大的作用，使得開發(fā)人員一下子就過上了小康的生活。

伸縮盒模型經(jīng)歷了幾次演變，大致分為舊版伸縮布局、過渡伸縮布局、新版伸縮布局，同樣為了避免混淆，我們以學(xué)習(xí)新版伸縮布局為主

新版伸縮布局

這里我們需要引入一些新的概念：

主軸：Flex容器的主軸主要用來配置Flex項目。

側(cè)軸：與主軸垂直的軸稱作側(cè)軸，是側(cè)軸方向的延伸。

主軸和側(cè)軸并不是固定不變的，通過flex-direction可以調(diào)整。

1、指定一個盒子為伸縮盒子 display: flex

2、設(shè)置屬性來調(diào)整此盒的子元素的布局方式 例如 flex-direction

3、明確主側(cè)軸的方向

4、可互換主側(cè)軸，也可改變方向

其相關(guān)屬性可參照源代碼里的解釋如flex-direction、flex-wrap、flex-flow、align-items、align-content、justify-content、align-self、flex、order等

另個兩個版本伸縮布局其實現(xiàn)思路與新版基本一致，區(qū)別在于其屬性及屬性值不同，熟練掌握新版伸縮布局后，要參照對比另外兩個版本的不同。