前端布局一直是CSS的一個重點應用，然而基於盒子模型的傳統布局方案，依賴display + position + float 屬性，對於某些特殊的布局非常不方便，比如：垂直居中就不容易實現。針對這一情況，在2009年，W3C提出了一種新的方案：Flex布局，可以簡便、完整、響應式地實現前端的各種布局，並且已經得到幾乎所有瀏覽器的支持。
眾所周知，前端分為PC端和移動端，並且它們的界面布局有一些差別，比如：PC端的界面中，水平方向是主軸（main axis），豎直方向是交叉軸（cross axis）；而移動端，水平方向是交叉軸（cross axis），豎直方向是主軸（main axis），針對這一差別，在前端布局中要特別注意。
flex屬性簡介
flex的屬性分為兩類：父容器屬性和子item的屬性
父容器屬性
| 屬性 | 作用 | 特性分類 |
|---|---|---|
| flex-direction | 定義子項在容器內的排列方向 | 排列 |
| flex-wrap | 定義子項在容器內的換行效果 | 排列 |
| flex-flow | flex-direction和flex-wrap的復合屬性 | 排列 |
| justify-content | 定義子項在容器內水平對齊方式 | 對齊 |
| align-items | 定義子項在容器內垂直對齊方式 | 對齊 |
| align-content | 定義多行子項在容器內整體垂直對齊方式 | 對齊 |
子item屬性
| 屬性 | 作用 | 特性分類 |
|---|---|---|
| order | 定義子項們的排列順序 | 排列 |
| flex-grow | 定義子項寬度之和不足父元素寬度時，子項拉伸的比例 | 占地面積 |
| flex-shrink | 定義子項寬度之和超過父元素寬度時，子項縮放的比例 | 占地面積 |
| flex-basis | 定義子項的初始寬度，flex-grow和flex-shrink以此為基礎縮放 | 占地面積 |
| 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設置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*這是css3屬性，如果不懂，請繼續往下閱讀*/
/*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：將對象作為內聯塊級彈性伸縮盒顯示
inline-flex將對象作為內聯級容器，它會根據子item的大小自適應寬度和高度，所以可以刪除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設置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*這是css3屬性，如果不懂，請繼續往下閱讀*/
/*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
設置子item的寬度（flex-direction = row）或高度（flex-direction = column）。如果設置該屬性，那么flex-grow/flex-shrink以該屬性大小進行縮放
5. flex
該屬性是：flex-grow flex-shrink flex-basis的簡寫，默認值為：0 1 auto，其中后兩個屬性可選
6. align-self
定義單個子item在交叉軸上的對齊方式，會覆蓋默認的對齊方式。默認值為auto，表示繼承父容器的align-items屬性，如果沒有父容器，則等同於stretch（stretch: 伸縮項目在交叉軸方向占滿伸縮容器, 前提是不設置交叉軸方向的尺寸）
定位
display屬性定義子item如何在父容器內布局，有兩中類型：relative 和 absolute
1. display: relative
在相對定位中，布局子item時需要用到margin、border、padding等盒子模型。其中，border和padding會顯示在item的背景色中；而margin則不會，默認是透明色
2. display: absolute
使用絕對定位的item，如果其父容器設置了relative布局，則以父容器做參考，如果父容器不設置relative布局，則以window做參考。其中，設置布局的屬性為：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;
視圖：
至此，Flexbox的語法介紹完畢，雖然有點多，但是還要多練，熟能生巧，熟練后你會發現，前端flex布局快速、高效和靈活。
(部分圖片來源互聯網，如有侵權，請告知，我怕賠不起）
參考文章
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