CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分布一個容器里項目布局，即使它們的大小是未知或者動態的，這里簡稱為Flex。

Flexbox布局常用于設計比較復雜的頁面，可以輕松的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴于浮動布局實現元素位置的定義以及重置元素的大小。

Flexbox布局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多余空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。綜合而言，Flexbox布局功能主要具有以下幾點：

第一，屏幕和瀏覽器窗口大小發生改變也可以靈活調整布局；

第二，可以指定伸縮項目沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大??；

第三，可以指定伸縮項目沿著主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之后或之間；

第四，可以指定如何將垂直于元素布局軸的額外空間分布到該元素的周圍；

第五，可以控制元素在頁面上的布局方向；

第六，可以按照不同于文檔對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文檔流先后順序重排伸縮項目順序。

Flexbox規范版本眾多，瀏覽器對此語法支持度也各有不同，接下來的內容以最新語法版本為例向大家展示：

1.創建一個flex容器

任何一個flexbox布局的第一步是需要創建一個flex容器。為此給元素設置display屬性的值為flex。在Safari瀏覽器中，你依然需要添加前綴-webkit，

.flexcontainer{ display: -webkit-flex; display: flex; }

2.Flex項目顯示

Flex項目是Flex容器的子元素。他們沿著主要軸和橫軸定位。默認的是沿著水平軸排列一行。你可以通過flex-direction來改變主軸方向修改為column，其默認值是row。

3.Flex項目列顯示

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }

4.Flex項目移動到頂部

如何實現將flex項目移動到頂部的效果，關鍵點：取決于主軸的方向。justify-content 屬性定義了項目在主軸上的對齊方式。align-items 屬性定義項目在交叉軸上如何對齊。 如果主軸是水平的方向，通過align-items設置；如果主軸是垂直的方向，通過justify-content設置。

.flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

（未完待續，下一節）