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