css3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用，使得開發人員一下子就過上了小康的生活。
伸縮盒模型經歷了幾次演變，大致分為舊版伸縮布局、過渡伸縮布局、新版伸縮布局
，同樣為了避免混淆，我們以學習新版伸縮布局為主
新版伸縮布局
這裡我們需要引入一些新的概念：
主軸：flex容器的主軸主要用來配置flex專案。
側軸：與主軸垂直的軸稱作側軸，是側軸方向的延伸。
主軸和側軸並不是固定不變的，通過flex-direction可以調整。
1、指定乙個盒子為伸縮盒子 display: flex
2、設定屬性來調整此盒的子元素的布局方式 例如 flex-direction
3、明確主側軸的方向
4、可互換主側軸，也可改變方向
其相關屬性可參照源**裡的解釋如flex-direction、flex-wrap、flex-flow、align-items、align-content、justify-content、align-self、flex、order等
另個兩個版本伸縮布局其實現思路與新版基本一致，區別在於其屬性及屬性值不同，熟練掌握新版伸縮布局後，要參照對比另外兩個版本的不同。
CSS3 伸縮布局 Flexbox
display flex inline flex 彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中...
CSS3 伸縮布局（一）
css3引入了一種新的布局模式 flexbox布局，即伸縮布局盒模型 flexible box 用來提供乙個更加有效的方式制定 調整和分布乙個容器裡專案布局，即使它們的大小是未知或者動態的，這裡簡稱為flex。flexbox布局常用於設計比較複雜的頁面，可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保...
css3伸縮布局實現三列固定
display webkit box 容器成為伸縮模型 box flex 通過比例讓元素以塊狀填充 box ordinal group 元素顯示順序 box orient 伸縮流方向 box direction 布局順序 box lines 伸縮換行 暫不支援 box pack 主軸對齊 box a...