Flexbox的布局是一個用于頁面布局的全新CSS3模塊功能,它可以把列表放在同一個方向（從左到右;flex-flow: row;或從上到下排列flex-flow: column;）窿给，并且讓這些列表能延伸到占用可用的空間环肘。較為復(fù)雜的布局可以通過嵌套一個伸縮容器（flex container）來輔助實現(xiàn)若河。

Flexbox可以簡單快速的創(chuàng)建一個具有彈性功能的布局，當在一個小屏幕上顯示的時候剿另，F(xiàn)lexbox可以讓元素在容器（伸縮容器）中進行自由擴展和收縮，從而容易調(diào)整整個布局锹引。它的目的是實現(xiàn)常見的布局模式系任，比如說三列布局，可以非常簡單的實現(xiàn)步氏。

伸縮容器（flex containers）和伸縮項目（flex items）

伸縮容器的設(shè)置為display:flex;

伸縮容器中的所有子元素都是伸縮項目响禽；

伸縮方向和換行

伸縮容器中的flex-flow來決定伸縮的布局方式，值為row荚醒，伸縮項目由左向右排列芋类，值為column，項目由上向下排列界阁。

一個伸縮容器中的所有伸縮項目既可以排列在單行也可以多行排列侯繁。這個主要由“flex-flow”是否設(shè)置為“wrap”來決定。如果伸縮容器設(shè)了“wrap”屬性值泡躯，當伸縮項目在伸縮容器中無法在一行中顯示的時候會另起一行排列贮竟。

如果伸縮容器把“flex-flow”設(shè)置為“row”后，伸縮項目將需要設(shè)置他們的寬度较剃。伸縮項目的高度將會自動設(shè)置為伸縮容器的高度咕别。

有關(guān)于flex-direction詳細

flex-direction屬性可以用來設(shè)定伸縮容器的主軸的方向，這也決定了用戶代理配置伸縮項目的方向写穴。主要適用于伸縮容器惰拱，主要包括以下幾個值：

row:flex-direction的默認值，表示伸縮容器的主軸與當前書寫模式的行內(nèi)軸（文字布局的主要主向）啊送。主軸起點與主軸終點方向分別等同于當前書寫模式的始與結(jié)方向偿短。

row-reverse：表示的是除了主軸起點與主軸終點方向交換以外同row屬性值的作用。

column：表示的是伸縮容器的主軸與當前書寫模式的塊軸（塊布局的主要方向）同向删掀。主軸起點與主軸終點方向分別等同于當前書寫模式的前與后方向。簡單的可以理解為列布局导街。

column-reverse：表示的是除了主軸起點與主軸終點方向交換以外同“column”的屬性值作用披泪。

關(guān)于flex-wrap詳細

flex-wrap屬性主要用來控制伸縮容器是單行還是多行，也決定了側(cè)軸方向一新的一行的堆放方向搬瑰。主要適用于伸縮容器款票，主要包括以下幾個值：

nowrap:flex-wrap的默認值控硼，表示的是伸縮容器為單行。側(cè)軸起點方向等同于當前書寫模式的起點或前/頭在側(cè)軸的那一邊艾少，而側(cè)軸終點方向是側(cè)軸起點的相反方向卡乾。

wrap：表示的是伸縮容器為多行。側(cè)軸起點方向等同于當前書寫模式的起瞇或前/頭在側(cè)軸的那一邊缚够，而側(cè)軸終點方向是側(cè)軸起點的相反方向幔妨。

wrap-reverse：除了側(cè)軸起點與側(cè)軸終點方向交換以外同wrap所起作用相同。

justify-content參數(shù)詳解

flex-start：伸縮項目向一行的起始位置靠齊谍椅。該行的第一個伸縮項目在主軸起點邊的外邊距與該行在主軸起點的邊對齊误堡，同時所有后續(xù)的伸縮項目與其前一個項目對齊。

flex-end：伸縮項目向一行的結(jié)束位置靠齊雏吭。該行的最后一個伸縮項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊锁施，同時所有前面的伸縮項目與其后一個項目對齊。

center：伸縮項目向一行的中間位置靠齊杖们。該行的伸縮項目將相互對齊并在行中居中對齊悉抵，同時第一個項目與該行的在主軸起點的邊的距離等同與最后一個項目與該行在主軸終點的邊的距離（如果剩余空間是負數(shù)，則保持兩端溢出的長度相等）摘完。

space-between：伸縮項目會平均地分布在一行里姥饰。如果剩余空間是負數(shù)，或該行只有一個伸縮項目描焰，則此值等效于「flex-start」媳否。在其它情況下，第一個項目在主軸起點邊的外邊距會與該行在主軸起點的邊對齊荆秦，同時最后一個項目在主軸終點邊的外邊距與該行在主軸終點的邊對齊篱竭，而剩下的伸縮項目在確保兩兩之間的空白空間相等下平均分布。

改變元素布局的順序

傳統(tǒng)上不改變元素的結(jié)構(gòu)要改變元素的布局順序一直是一個痛苦的事情步绸。不過在Flexbox中掺逼，你可以通過“order”屬性來修改伸縮項目的布局順序（在不調(diào)整結(jié)構(gòu)前提之下）。這個屬性一直接受的整數(shù)值——稱為系數(shù)集——也稱為排序組瓤介，會出現(xiàn)在伸縮項目中吕喘。默認情況之下，所有的伸縮項目的順序組都是“0”刑桑。我們可以很容易的給每個伸縮項目設(shè)置不同的順序值氯质。更高的值會排在后面，而原來的HTML結(jié)構(gòu)并不會有任何變化祠斧。并且order可以取負值闻察。

簡單例子

這是一個很簡單的實例，F(xiàn)lexbox創(chuàng)建了一個經(jīng)典的三列布局。主內(nèi)容寬度為60%辕漂，而邊欄是使用“flex”屬性呢灶，按比例自動根據(jù)伸縮容器剩余空間計算得到對應(yīng)的寬度,右邊始終是左邊的2倍寬度。

html

<div class="container>

? ? ? ?<nav class="left"></nav>

? ? ? ?<div class="main"></div>

? ? ?<div class="right"></div>

</div>

CSS

.container {

display: flex;

flex-flow: row;

}

.main {

width: 60%;

}

.left {

flex: 1;

}

.right {

flex: 2;

}