文章轉(zhuǎn)載自 CSDN 中的一篇 博客
作者 ReedSun
搬到這里只是為了自己和朋友學(xué)習(xí)之便，對文字進(jìn)行了小部分重新編排，如有侵權(quán)，麻煩您聯(lián)系我刪除，謝謝，抱歉。
如果讀者有發(fā)現(xiàn)編排錯誤，錯別字等，歡迎指出，非常感謝。
Flex 是 Flexible Box 的縮寫，意為“彈性布局”，用來為盒模型提供最大的靈活性。它可以簡單、完整、響應(yīng)式的實現(xiàn)各種網(wǎng)頁布局，目前已經(jīng)得到了大多數(shù)主流瀏覽器的支持，有關(guān)于它的兼容性可以在 CanIuse 中的查詢到：
任何一個容器都可以指定為 Flex 布局
.box {
display: flex;
}
.box {
display: inline-flex; // 行內(nèi)元素通過這種方式指定為Flex布局
}
.box {
display: -webkit-flex // Webkit內(nèi)核瀏覽器使用此方式指定為Flex布局
}
文章中的內(nèi)容主要借鑒自：
Flex布局教程 by阮一峰
flex布局 by饑人谷方方老師。
基本概念
flex container：采用 Flex 布局的元素，即父元素，稱為Flex容器，簡稱容器。
flex item：父元素內(nèi)包含的子元素，稱為Flex項目，簡稱項目。
Flex是沒有方向之分的，在 Flex 容器中默認(rèn)存在兩根軸，水平的軸為 主軸main axis，垂直的軸為 側(cè)軸ross axis。（如果改變 flex-direction，主軸和側(cè)軸也將會改變）
主軸的開始位置（與邊框的交叉點）叫做 main start ，結(jié)束位置叫做 main end 。
側(cè)軸的開始位置叫做 cross start ， 結(jié)束位置叫做 cross end 。
項目默認(rèn)沿主軸方向排列，單個項目占據(jù)的主軸空間叫做 main size ，側(cè)軸空間叫做 cross size 。
以上概念可以用下圖全部展現(xiàn)：
注意：設(shè)為 Flex 布局后，子元素的 float、clear、vertical-align 屬性將失效。
容器（父元素）的屬性
容器共有六個屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction 屬性
flex-direction 屬性決定主軸的方向，它可能有四個值。
row：默認(rèn)值，主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上端。
column-reverse：主軸為垂直方向，起點在下端。
四種值對應(yīng)的情況如下圖所示：
flex-wrap 屬性
flex-wrap 屬性決定項目在一行排不下的情況下是否換行，它可能有三種值。
nowrap：默認(rèn)值，不換行。
wrap：換行，第一行在主軸開始方向，依次往主軸結(jié)束方向布置。
wrap-reverse：換行，第一行在主軸結(jié)束方向，依次往主軸結(jié)束方向布置
三種值對應(yīng)的情況如下圖所示：
flex-flow 屬性
flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認(rèn)值為row nowrap。
justify-content 屬性
justify-content屬性定義了項目在主軸上的對齊方式，它可能有五個值。
flex-start：默認(rèn)值，主軸開始方向?qū)R。
flex-end：主軸結(jié)束方向?qū)R。
center：主軸居中對齊。
space-between：兩端對齊，項目之間間隔都相等。
space-around：每個項目兩側(cè)的間隔相等，所以項目之間間隔是項目與邊框間隔的兩倍。
假設(shè)主軸為從左到右，五種值對應(yīng)的情況如下圖所示：
align-items 屬性
align-items屬性定義了每行項目在側(cè)軸方向上的對齊方式，它也可能有五個值。
flex-start：側(cè)軸開始方向?qū)R。
flex-end：側(cè)軸結(jié)束方向?qū)R。
center：側(cè)軸居中對齊。
baseline：項目第一行文字的基線對齊
stretch：默認(rèn)值，如果項目未設(shè)置高度或高度設(shè)為auto，將占滿整個容器。 假設(shè)側(cè)軸為從上到下，五種值對應(yīng)的情況如下圖所示：
align-content 屬性
align-content 屬性定義了容器在側(cè)軸方向上有額外空間時，如何每排布一行，當(dāng)容器只有一行時，它不起作用，它可能有六個值。
flex-start：側(cè)軸開始方向?qū)R。
flex-end：側(cè)軸結(jié)束方向?qū)R。
center：側(cè)軸中心中對齊。
space-between：與側(cè)軸兩端對齊，每行軸線間隔平均。
space-around：每根軸線兩側(cè)間隔相等。
stretch：默認(rèn)值，占滿整個整個側(cè)軸.
假設(shè)側(cè)軸為從上到下，六種值對應(yīng)的情況如下圖所示：
項目（子元素的屬性）
項目共有六個屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order 屬性
order屬性定義項目的排列順序，數(shù)值越小排列越靠前，默認(rèn)為0，可能的值為任意整數(shù)。
flex-grow 屬性
flex-grow屬性定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間也不放大。
如果所有項目的 flex-grow 屬性都為1，則它們將等分剩余空間（如果有的話）。
如果一個項目的 flex-grow 屬性為 2，其他項目都為 1，則前者占據(jù)的剩余空間將比其他項多一倍，如下圖所示：
flex-shrink 屬性
flex-shrink屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足該項目將縮小。負(fù)值對該屬性無效,即該屬性可能的值為0或正整數(shù)。
如果所有項目的flex-shrink屬性都為1，當(dāng)空間不足時，都將等比例縮小。
如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小，如下圖所示：
flex-basis 屬性
flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間（main-size）。瀏覽器根據(jù)整個屬性，計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。
它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項目將占據(jù)固定空間。
flex 屬性
flex屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫，默認(rèn)值為 0 1 auto 。后兩個屬性可選。
該屬性有兩個快捷值：auto (1 1 auto)
（既可以放大占滿空間，也可縮?。?和 none (0 0 auto)
（不可放大，也不可縮?。?。
建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關(guān)值。
align-self 屬性
align-self 屬性允許單個項目有與其他項目不一樣的側(cè)軸對齊方式，可覆蓋 align-items 屬性。默認(rèn)值為auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch 。
其值除auto外，其他與 align-items 完全一致。
