前端布局一直是CSS的一個重點應(yīng)用，然而基于盒子模型的傳統(tǒng)布局方案，依賴display + position + float 屬性，對于某些特殊的布局非常不方便每强，比如：垂直居中就不容易實現(xiàn)始腾。針對這一情況，在2009年空执，W3C提出了一種新的方案：Flex布局浪箭，可以簡便、完整辨绊、響應(yīng)式地實現(xiàn)前端的各種布局奶栖，并且已經(jīng)得到幾乎所有瀏覽器的支持。
眾所周知门坷，前端分為PC端和移動端宣鄙，并且它們的界面布局有一些差別，比如：PC端的界面中默蚌，水平方向是主軸（main axis）冻晤，豎直方向是交叉軸（cross axis）；而移動端绸吸，水平方向是交叉軸（cross axis）鼻弧，豎直方向是主軸（main axis），針對這一差別锦茁，在前端布局中要特別注意攘轩。
flex屬性簡介
flex的屬性分為兩類：父容器屬性和子item的屬性
父容器屬性
| 屬性 | 作用 | 特性分類 |
|---|---|---|
| flex-direction | 定義子項在容器內(nèi)的排列方向 | 排列 |
| flex-wrap | 定義子項在容器內(nèi)的換行效果 | 排列 |
| flex-flow | flex-direction和flex-wrap的復(fù)合屬性 | 排列 |
| justify-content | 定義子項在容器內(nèi)水平對齊方式 | 對齊 |
| align-items | 定義子項在容器內(nèi)垂直對齊方式 | 對齊 |
| align-content | 定義多行子項在容器內(nèi)整體垂直對齊方式 | 對齊 |
子item屬性
| 屬性 | 作用 | 特性分類 |
|---|---|---|
| order | 定義子項們的排列順序 | 排列 |
| flex-grow | 定義子項寬度之和不足父元素寬度時，子項拉伸的比例 | 占地面積 |
| flex-shrink | 定義子項寬度之和超過父元素寬度時码俩，子項縮放的比例 | 占地面積 |
| flex-basis | 定義子項的初始寬度度帮，flex-grow和flex-shrink以此為基礎(chǔ)縮放 | 占地面積 |
| align-self | 定義單個子項與其他項目不一樣的對齊方式 | 對齊 |
Flex布局
Flex是Flexible Box的縮寫，意思是彈性布局握玛，用來為盒子模型提供最大的靈活性够傍。分為兩種布局方式：flex 和 inline-flex甫菠。
1. flex： 將對象作為彈性伸縮盒顯示
flex默認從左邊開始布局挠铲，所以指定寬度后，子item就開始從左至右依次布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
width:200px;
background-color: red;
display: flex;/*父div設(shè)置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*這是css3屬性寂诱，如果不懂拂苹，請繼續(xù)往下閱讀*/
/*float:left;這個屬性就不需要了，會自動浮動*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果圖
2. inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示
inline-flex將對象作為內(nèi)聯(lián)級容器痰洒，它會根據(jù)子item的大小自適應(yīng)寬度和高度瓢棒，所以可以刪除width: 200px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
background-color: red;
display: inline-flex;/*父div設(shè)置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*這是css3屬性，如果不懂丘喻，請繼續(xù)往下閱讀*/
/*float:left;這個屬性就不需要了脯宿，會自動浮動*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果圖
flex父容器屬性
1. flex direction
控制主軸的方向，即子item的排列方向泉粉，有四個取值范圍：
- row（default）- 主軸水平
- row-reverse
- column - 主軸垂直
- column-reverse
2. flex wrap
定義子item在主軸方向的換行效果
3. flex-flow
該屬性是flex-direction和flex-wrap兩個屬性的縮寫连霉，默認值為：row nowrap
4. justify content
定義子item在主軸方向的對齊方式
5. align-items
定義子item在交叉軸方向的對齊方式
6. align-content
定義多行子item在交叉軸上的對齊方式
子item屬性
1. order
定義子item的排列順序榴芳，默認為0
2. flex-grow
定義子item的寬度小于父容器時，子item的拉伸比例跺撼，默認為0窟感，表示不拉伸
3. flex-shrink
定義子item的寬度之和超過父容器時，子item的縮放的比例歉井，默認為1
4. flex-basis
設(shè)置子item的寬度（flex-direction = row）或高度（flex-direction = column）柿祈。如果設(shè)置該屬性，那么flex-grow/flex-shrink以該屬性大小進行縮放
5. flex
該屬性是：flex-grow flex-shrink flex-basis的簡寫哩至，默認值為：0 1 auto躏嚎，其中后兩個屬性可選
6. align-self
定義單個子item在交叉軸上的對齊方式，會覆蓋默認的對齊方式菩貌。默認值為auto紧索，表示繼承父容器的align-items屬性，如果沒有父容器菜谣，則等同于stretch（stretch: 伸縮項目在交叉軸方向占滿伸縮容器, 前提是不設(shè)置交叉軸方向的尺寸）
定位
display屬性定義子item如何在父容器內(nèi)布局珠漂，有兩中類型：relative 和 absolute
1. display: relative
在相對定位中，布局子item時需要用到margin尾膊、border媳危、padding等盒子模型。其中冈敛，border和padding會顯示在item的背景色中待笑；而margin則不會，默認是透明色
2. display: absolute
使用絕對定位的item抓谴，如果其父容器設(shè)置了relative布局暮蹂，則以父容器做參考，如果父容器不設(shè)置relative布局癌压，則以window做參考仰泻。其中，設(shè)置布局的屬性為：left滩届、right集侯、top、bottom帜消、start棠枉、end。
Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;
視圖：
Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;
視圖：
至此泡挺，F(xiàn)lexbox的語法介紹完畢辈讶，雖然有點多，但是還要多練娄猫，熟能生巧贱除，熟練后你會發(fā)現(xiàn)咳促，前端flex布局快速、高效和靈活勘伺。
(部分圖片來源互聯(lián)網(wǎng)跪腹，如有侵權(quán)，請告知飞醉，我怕賠不起）
參考文章
https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context
https://facebook.github.io/yoga/docs/absolute-position/
http://www.cnblogs.com/shuiyi/p/5716918.html
http://www.w3school.com.cn/css/css_boxmodel.asp
