傳統(tǒng)布局方式基于盒狀模型（display + position + float ），能解決大部分布局問題，但對于一些特殊的復(fù)雜布局以及垂直居中布局，顯然 flex 布局（彈性布局）擁有更大的優(yōu)勢。熟悉掌握 flex 布局及擁有一套常用的布局總結(jié)，能幫助我們高效的進(jìn)行前端開發(fā)。
阮一峰 flex 布局博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
新舊 flex 布局兼容性寫法：https://www.w3cplus.com/css3/using-flexbox.html
一、瀏覽器兼容性
flex 布局對于大部分瀏覽器兼容性較好，主要問題在于不支持10以下的 IE 瀏覽器版本，如果你的項(xiàng)目對于兼容性要求較高，需要兼容舊版瀏覽器，建議慎用 flex 布局。但它對移動(dòng)端的兼容性較好，本人也主要將其用在移動(dòng)端的開發(fā)上。
二、基本概念
（1）盒狀模型
如上圖所示，盒子模型由 margin、border、padding、content 四部分組成，再結(jié)合 display（block 塊狀元素、inline 內(nèi)聯(lián)元素、inline-block 內(nèi)聯(lián)塊狀元素），position （relative 相對定位、absolute 絕對定位、fixed 固定定位），float 浮動(dòng)對頁面進(jìn)行布局。
（2）flex 彈性布局
采用 flex 布局的容器稱為 flex 容器（flex container），當(dāng)一個(gè)元素采用 flex 布局后，它的子元素將自動(dòng)成為容器成員（flex item）。
如下圖所示，flex 容器默認(rèn)存在2根軸線，主軸（main axis，默認(rèn)為橫軸）和交叉軸（cross axis，默認(rèn)為縱軸），flex 布局所有的屬性都圍繞這2條軸線上的元素如何布排進(jìn)行設(shè)定。
總結(jié)：盒狀模型通過元素與自身、元素與父元素、元素與屏幕的定位來實(shí)現(xiàn)頁面布局，而 flex 布局則打破了這種模式，它是對 flex 容器進(jìn)行主軸、交叉軸的布局設(shè)定，使其內(nèi)部所有的元素都遵循這種設(shè)定進(jìn)行布局。無疑，采用 flex 布局方案能以更少的代碼量和效率實(shí)現(xiàn)更復(fù)雜的布局要求（不考慮舊版瀏覽器兼容情況下）。
三、常用屬性
（1）容器（flex container）屬性：6個(gè)
1、flex-direction，決定主軸上元素的排布方向，有4種取值
row：默認(rèn)值，主軸為水平方向且起點(diǎn)在左端
row-reverse：主軸為水平方向且起點(diǎn)在右端
column：主軸為垂直方向且起點(diǎn)在上方
column-reverse：主軸為垂直方向且起點(diǎn)在下方
2、flex-wrap，定義換行方式，當(dāng)一條軸線放不下時(shí)如何換行，有3種取值
nowrap：默認(rèn)值，不換行
wrap：換行
wrap-reverse：換行且第一行在下方
3、flex-flow，是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為 row nowrap（主軸在橫軸，不換行）
4、justify-content，定義了子元素在主軸上的對齊方式，有5種取值（排布與主軸方向有關(guān)，下面假設(shè)主軸為橫軸）
flex-start ：默認(rèn)值，左對齊，從左至右按順序排列
flex-end：右對齊，從右至左按順序排列
center：居中排列
space-between：兩端對齊，最左與最右的元素與容器邊界無間隔，元素與元素間的距離相等
space-around：等距對齊，元素兩側(cè)間隔相等，元素與元素之間的距離是最兩端元素與容器邊界距離的2倍，
5、align-items，定義在交叉軸上的項(xiàng)目如何對齊，有5種取值。
flex-start：以交叉軸的起點(diǎn)對齊
flex-end：以交叉軸的終點(diǎn)對齊
center：以交叉軸的中點(diǎn)對齊
strench：如果項(xiàng)目未設(shè)置高度或設(shè)置為 auto，將占滿整個(gè)容器
baseline：以項(xiàng)目第一行文字的基線對齊
6、align-content，定義了多根軸線的對齊方式，有6種取值。（當(dāng)軸線只有一條時(shí)，該屬性不起作用）
flex-start：與交叉軸的起點(diǎn)對齊
flex-end：與交叉軸的終點(diǎn)對齊
center：與交叉軸的中點(diǎn)對齊
space-between：與交叉軸兩端對齊，軸線之間的間隔相等
space-around：軸線之間的間隔相等，軸線間的距離是軸線與交叉軸起點(diǎn)、交叉軸終點(diǎn)距離的兩倍。
stretch：默認(rèn)值，軸線占滿整個(gè)交叉軸
（2）項(xiàng)目（flex item）屬性：6個(gè)
1、order，定義項(xiàng)目的排列順序，數(shù)值越小，排列越靠前，默認(rèn)都為0
2、flex-grow，定義項(xiàng)目的放大比例，默認(rèn)都為0，即使有剩余空間也不放大。如果都設(shè)為1，則所有項(xiàng)目將等分空間。如果有一個(gè)項(xiàng)目設(shè)為2而其它項(xiàng)目設(shè)為1，則該項(xiàng)目占據(jù)的空間是其它項(xiàng)目的2倍。
3、flex-shrink，定義了項(xiàng)目的縮小比例，默認(rèn)都為1， 既當(dāng)空間不足時(shí)，所有項(xiàng)目都將等比例縮小。如果設(shè)為0，則當(dāng)空間不足時(shí)，該項(xiàng)目也不縮小。
4、flex-basis，定義項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個(gè)屬性計(jì)算是否有多余空間。默認(rèn)值為 auto，即項(xiàng)目本來的大小，也可設(shè)置固定空間。
5、flex，是 flex-grow、flex-shrink 和 flex-basis 的簡寫，默認(rèn)為0 1 auto。該屬性有2個(gè)快捷值，auto（1 1 auto）和 none（0 0 auto），建議優(yōu)先使用這2個(gè)屬性，而不是單獨(dú)寫3個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。
6、align-self，允許單個(gè)項(xiàng)目能夠有和其它項(xiàng)目不一樣的對齊方式，可覆蓋 align-items 屬性。默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性。
四、常用布局總結(jié)
在開展一些前端項(xiàng)目時(shí)，會(huì)發(fā)現(xiàn)很多頁面布局都是相似和重復(fù)的，此時(shí)若把公共布局樣式都抽離出來，需要時(shí)再調(diào)用，對于減少代碼量、提高效率和后續(xù)修改都是非常有利的。以下為平時(shí)總結(jié)的一些通用布局代碼（父元素調(diào)用）：
//上下左右居中
.box-center {
? display: flex;
? justify-content: center;
? align-items: center;
}
// item 兩端對齊（左右兩端不留空間）
.item-between{
? display: flex;
? justify-content: space-between;
}
//item 兩端對齊且上下居中（主軸在橫軸）
.lr-bettem{
? display: flex;
? flex-direction: row;
? justify-content: space-between;
? align-items: center;
}
//item 從左到右排列，且上下居中（主軸在橫軸）
.lr-start{
? display: flex;
? flex-direction: row;
? justify-content: flex-start;
? align-items: center;
}
//item 從左到右排列，上下不居中
.lr-start2{
? display: flex;
? flex-direction: row;
? justify-content: flex-start;
}
//item從右到左排列，且上下居中
.lr-end {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
// item 上下兩端對齊（主軸在縱軸）
.ud-bettem{
? display: flex;
? flex-direction: column;
? justify-content: space-between;
}
