css3引入了一種新的布局模式——flexbox布局，即伸縮布局盒模型（flexible box），用來提供乙個更加有效的方式制定、調整和分布乙個容器裡專案布局，即使它們的大小是未知或者動態的，這裡簡稱為flex。
flexbox布局常用於設計比較複雜的頁面，可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動布局實現元素位置的定義以及重置元素的大小。
flexbox布局在定義伸縮專案大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮專案的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮專案，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮專案時，瀏覽器會根據一定的比例減少伸縮專案的大小，使其不溢位伸縮容器。綜合而言，flexbox布局功能主要具有以下幾點：
第一，螢幕和瀏覽器視窗大小發生改變也可以靈活調整布局；
第二，可以指定伸縮專案沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮專案的大小；
第三，可以指定伸縮專案沿著主軸或側軸將伸縮容器額外空間，分配到伸縮專案之前、之後或之間；
第四，可以指定如何將垂直於元素布局軸的額外空間分布到該元素的周圍；
第五，可以控制元素在頁面上的布局方向；
第六，可以按照不同於文件物件模型（dom）所指定排序方式對螢幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文件流先後順序重排伸縮專案順序。
1.建立乙個flex容器
任何乙個flexbox布局的第一步是需要建立乙個flex容器。為此給元素設定display屬性的值為flex。在safari瀏覽器中，你依然需要新增字首-webkit，
.flexcontainer
2.flex專案顯示
flex專案是flex容器的子元素。他們沿著主要軸和橫軸定位。預設的是沿著水平軸排列一行。你可以通過flex-direction來改變主軸方向修改為column，其預設值是row。
3.flex專案列顯示
.flexcontainer
4.flex專案移動到頂部
如何實現將flex專案移動到頂部的效果，關鍵點：取決於主軸的方向。justify-content 屬性定義了專案在主軸上的對齊方式。align-items 屬性定義專案在交叉軸上如何對齊。 如果主軸是水平的方向，通過align-items設定；如果主軸是垂直的方向，通過justify-content設定。
.flexcontainer
.flexcontainer
CSS3的伸縮布局
css3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用，使得開發人員一下子就過上了小康的生活。伸縮盒模型經歷了幾次演變，大致分為舊版伸縮布局 過渡伸縮布局 新版伸縮布局 同樣為了避免混淆，我們以學習新版伸縮布局為主 ...
CSS3 伸縮布局 Flexbox
display flex inline flex 彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中...
css3伸縮布局實現三列固定
display webkit box 容器成為伸縮模型 box flex 通過比例讓元素以塊狀填充 box ordinal group 元素顯示順序 box orient 伸縮流方向 box direction 布局順序 box lines 伸縮換行 暫不支援 box pack 主軸對齊 box a...