伸縮布局
CSS3引入了一種新的布局模式——Flexbox布局，即伸縮布局盒模型（Flexible Box），用來提供一個更加有效的方式制定、調整和分布一個容器裡項目布局，即使它們的大小是未知或者動態的，這裡簡稱爲Flex。
Flexbox布局常用於設計比較複雜的頁面，可以輕松的實現屏幕和瀏覽器窗口大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動布局實現元素位置的定義以及重置元素的大小。
Flexbox布局在定義伸縮項目大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮項目的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮項目，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮項目時，瀏覽器會根據一定的比例減少伸縮項目的大小，使其不溢出伸縮容器。綜合而言，Flexbox布局功能主要具有以下幾點：
屏幕和瀏覽器窗口大小發生改變也可以靈活調整布局；
可以指定伸縮項目沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮項目的大小；
可以指定伸縮項目沿著主軸或側軸將伸縮容器額外空間，分配到伸縮項目之前、之後或之間；
可以指定如何將垂直於元素布局軸的額外空間分布到該元素的周圍；
可以控制元素在頁面上的布局方向；
可以按照不同於文档對象模型（DOM）所指定排序方式對屏幕上的元素重新排序。即說可以在瀏覽器渲染中不按照文档流先後順序重排伸縮項目順序。
Flexbox槼範版本衆多，瀏覽器對此語法支持度也各有不同，接下來的内容以最新語法版本爲例向大家展示：
創建一個flex容器
任何一個flexbox布局的第一步是需要創建一個flex容器。爲此給元素設置display屬性的值爲flex。在Safari瀏覽器中，你依然需要添加前綴-webkit，
.flexcontainer{ display: -webkit-flex; display: flex; }Flex項目顯示
Flex項目是Flex容器的子元素。他們沿著主要軸和橫軸定位。默認的是沿著水平軸排列一行。你可以通過flex-direction來改變主軸方向修改爲column，其默認值是row。
Flex項目列顯示
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
} 
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;
} 
Flex項目移到左邊
flex項目稱動到左邊或右邊也取決於主軸的方向。如果flex-direction設置爲row，設置justify-content控制方向；如果設置爲column，設置align-items控制方向。
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;
} 
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
} 
Flex項目移動右邊
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-end;
justify-content: flex-end;
} 
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-end;
align-items: flex-end;
} 
水平垂直居中
在Flexbox容器中制作水平垂直居中是微不足道的。設置justify-content或者align-items爲center。另外根據主軸的方向設置flex-direction爲row或column。
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
} 
.flexcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
} 
Flex項目實現自動伸縮
您可以定義一個flex項目，如何相對於flex容器實現自動的伸縮。需要給每個flex項目設置flex屬性設置需要伸縮的值。
.bigitem{
-webkit-flex:200;
flex:200;
}
.smallitem{
-webkit-flex:100;
flex:100;
} 
實現圖片水平垂直居中
