傳統(tǒng)布局方式基于盒狀模型（display + position + float ），能解決大部分布局問題，但對于一些特殊的復雜布局以及垂直居中布局，顯然 flex 布局（彈性布局）擁有更大的優(yōu)勢。熟悉掌握 flex 布局及擁有一套常用的布局總結题诵，能幫助我們高效的進行前端開發(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 瀏覽器版本，如果你的項目對于兼容性要求較高奶甘，需要兼容舊版瀏覽器，建議慎用 flex 布局祭椰。但它對移動端的兼容性較好臭家，本人也主要將其用在移動端的開發(fā)上。
二方淤、基本概念
（1）盒狀模型
如上圖所示钉赁，盒子模型由 margin、border携茂、padding你踩、content 四部分組成，再結合 display（block 塊狀元素、inline 內(nèi)聯(lián)元素带膜、inline-block 內(nèi)聯(lián)塊狀元素）吩谦，position （relative 相對定位、absolute 絕對定位膝藕、fixed 固定定位）式廷，float 浮動對頁面進行布局。
（2）flex 彈性布局
采用 flex 布局的容器稱為 flex 容器（flex container）芭挽，當一個元素采用 flex 布局后滑废，它的子元素將自動成為容器成員（flex item）。
如下圖所示袜爪，flex 容器默認存在2根軸線蠕趁，主軸（main axis，默認為橫軸）和交叉軸（cross axis辛馆，默認為縱軸）俺陋，flex 布局所有的屬性都圍繞這2條軸線上的元素如何布排進行設定。
總結：盒狀模型通過元素與自身怀各、元素與父元素倔韭、元素與屏幕的定位來實現(xiàn)頁面布局，而 flex 布局則打破了這種模式瓢对，它是對 flex 容器進行主軸寿酌、交叉軸的布局設定，使其內(nèi)部所有的元素都遵循這種設定進行布局硕蛹。無疑醇疼，采用 flex 布局方案能以更少的代碼量和效率實現(xiàn)更復雜的布局要求（不考慮舊版瀏覽器兼容情況下）。
三法焰、常用屬性
（1）容器（flex container）屬性：6個
1秧荆、flex-direction，決定主軸上元素的排布方向埃仪，有4種取值
row：默認值乙濒，主軸為水平方向且起點在左端
row-reverse：主軸為水平方向且起點在右端
column：主軸為垂直方向且起點在上方
column-reverse：主軸為垂直方向且起點在下方
2、flex-wrap卵蛉，定義換行方式颁股，當一條軸線放不下時如何換行，有3種取值
nowrap：默認值傻丝，不換行
wrap：換行
wrap-reverse：換行且第一行在下方
3甘有、flex-flow，是flex-direction屬性和flex-wrap屬性的簡寫形式葡缰，默認值為 row nowrap（主軸在橫軸亏掀，不換行）
4忱反、justify-content，定義了子元素在主軸上的對齊方式滤愕，有5種取值（排布與主軸方向有關温算，下面假設主軸為橫軸）
flex-start ：默認值，左對齊该互，從左至右按順序排列
flex-end：右對齊米者，從右至左按順序排列
center：居中排列
space-between：兩端對齊，最左與最右的元素與容器邊界無間隔宇智，元素與元素間的距離相等
space-around：等距對齊蔓搞，元素兩側(cè)間隔相等，元素與元素之間的距離是最兩端元素與容器邊界距離的2倍随橘，
5喂分、align-items，定義在交叉軸上的項目如何對齊机蔗，有5種取值蒲祈。
flex-start：以交叉軸的起點對齊
flex-end：以交叉軸的終點對齊
center：以交叉軸的中點對齊
strench：如果項目未設置高度或設置為 auto，將占滿整個容器
baseline：以項目第一行文字的基線對齊
6萝嘁、align-content梆掸，定義了多根軸線的對齊方式，有6種取值牙言。（當軸線只有一條時酸钦，該屬性不起作用）
flex-start：與交叉軸的起點對齊
flex-end：與交叉軸的終點對齊
center：與交叉軸的中點對齊
space-between：與交叉軸兩端對齊，軸線之間的間隔相等
space-around：軸線之間的間隔相等咱枉，軸線間的距離是軸線與交叉軸起點卑硫、交叉軸終點距離的兩倍。
stretch：默認值蚕断，軸線占滿整個交叉軸
（2）項目（flex item）屬性：6個
1欢伏、order，定義項目的排列順序亿乳，數(shù)值越小硝拧，排列越靠前，默認都為0
2葛假、flex-grow障陶，定義項目的放大比例，默認都為0桐款，即使有剩余空間也不放大。如果都設為1夷恍，則所有項目將等分空間魔眨。如果有一個項目設為2而其它項目設為1媳维，則該項目占據(jù)的空間是其它項目的2倍。
3遏暴、flex-shrink侄刽，定義了項目的縮小比例，默認都為1朋凉， 既當空間不足時州丹，所有項目都將等比例縮小。如果設為0杂彭，則當空間不足時墓毒，該項目也不縮小。
4亲怠、flex-basis所计，定義項目占據(jù)的主軸空間，瀏覽器根據(jù)這個屬性計算是否有多余空間团秽。默認值為 auto主胧，即項目本來的大小，也可設置固定空間习勤。
5踪栋、flex，是 flex-grow图毕、flex-shrink 和 flex-basis 的簡寫夷都，默認為0 1 auto。該屬性有2個快捷值吴旋，auto（1 1 auto）和 none（0 0 auto）损肛，建議優(yōu)先使用這2個屬性，而不是單獨寫3個分離的屬性荣瑟，因為瀏覽器會推算相關值治拿。
6、align-self笆焰，允許單個項目能夠有和其它項目不一樣的對齊方式劫谅，可覆蓋 align-items 屬性。默認值為 auto嚷掠，表示繼承父元素的 align-items 屬性捏检。
四、常用布局總結
在開展一些前端項目時不皆，會發(fā)現(xiàn)很多頁面布局都是相似和重復的贯城，此時若把公共布局樣式都抽離出來，需要時再調(diào)用霹娄，對于減少代碼量能犯、提高效率和后續(xù)修改都是非常有利的鲫骗。以下為平時總結的一些通用布局代碼（父元素調(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;
}
