1.傳統布局和flex布局對比
1.1 傳統布局
兼容性好。
布局繁瑣。
局限性，不能再移動端很好的布局。
1.2 flex 布局
操作方便，布局極其簡單，移動端使用比較廣泛。
pc端瀏覽器支持情況比較差。
IE11或更低版本不支持flex或僅支持部分。
1.3 建議
如果是pc端頁面布局，還是采用傳統方式。
如果是移動端或者是不考慮兼容的
pc則采用flex。
2. flex布局原理
flex是flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局。當我們為父盒子設為
flex布局以后，子元素的float、clear和vertical-align屬性將失效。flex布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局 。采用
Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。總結：就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
3. 父項常見屬性
這些屬性是和
display:flex;寫在一起的都是寫在父盒子中。
flex-direction：設置主軸的方向。justify-content：設置主軸上的子元素排列方式。flex-wrap：設置子元素是否換行 。align-content：設置側軸上的子元素的排列方式（多行）。align-items：設置側軸上的子元素排列方式（單行）。flex-flow：復合屬性，相當于同時設置了flex-direction和flex-wrap。
3.1 flex-direction設置主軸的方向
在
flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸。默認主軸方向就是
x軸方向，水平向右。默認側軸方向就是
y軸方向，水平向下。
-
注意： 主軸和側軸是會變化的，就看
flex-direction設置誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的。
3.2 justify-content設置主軸上的子元素排列方式
3.3 flex-wrap設置是否換行
默認情況下，項目都排在一條線（又稱”軸線”）上。
flex-wrap屬性定義，flex布局中默認是不換行的。nowrap不換行。wrap換行。
3.4 align-items 設置側軸上的子元素排列方式（單行 ）
該屬性是控制子項在側軸（默認是y軸）上的排列方式 在子項為單項（單行）的時候使用。
flex-start從頭部開始。flex-end從尾部開始。center居中顯示。stretch拉伸。
3.5 align-content 設置側軸上的子元素的排列方式（多行）
- 設置子項在側軸上的排列方式 并且只能用于子項出現 換行 的情況（多行），在單行下是沒有效果的。
3.6 align-content 和 align-items 區別
align-items適用于單行情況下， 只有上對齊、下對齊、居中和 拉伸。align-content適應于換行（多行）的情況下（單行情況下無效）， 可以設置 上對齊、下對齊、居中、拉伸以及平均分配剩余空間等屬性值。總結就是單行找
align-items多行找align-content。
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex-flow:row wrap;
4. flex 布局子項常見屬性
flex子項目占的份數。align-self控制子項自己在側軸的排列方式。order屬性定義子項的排列順序（前后順序）。
4.1 flex 屬性（重要）
flex屬性定義子項目分配剩余空間，用flex來表示占多少份數。案例演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
,maximum-scale=1.0,minimum-scale=1.0>
<title>flex子項常見的屬性</title>
<style>
em,
i {
/* 去除斜體 */
font-style: normal;
}
/* 首尾固定寬度 中間為剩余的所有空間 */
div {
display: flex;
width: 60%;
height: 150px;
margin: 100px auto;
background-color: pink;
}
div span:first-child,
div span:last-child {
width: 99px;
background-color: skyblue;
}
div span:nth-child(2) {
flex: 1;
}
/* 三等分 */
p {
display: flex;
width: 60%;
height: 150px;
margin: 100px auto;
background-color: aqua;
}
p span {
flex: 1;
}
p span:nth-child(1) {
background-color: #FF8329;
}
p span:nth-child(2) {
background-color: #FF930A;
}
p span:nth-child(3) {
background-color: #c6ff1d;
}
div em:nth-child(1) {
flex: 1;
background-color: #FF8329;
}
div em:nth-child(2) {
flex: 2;
background-color: #ff7815;
}
div em:nth-child(3) {
flex: 3;
background-color: #ff6507;
}
.block_div {
width: 900px;
background-color: pink;
}
div i {
display: block;
}
div i:nth-child(1) {
width: 100px;
background-color: #ff974c;
}
div i:nth-child(2) {
width: 300px;
background-color: #ff8031;
}
div i:nth-child(3) {
width: 500px;
background-color: #ff4c00;
}
</style>
</head>
<body>
<!-- 兩端寬度固定 剩余的中間平分 -->
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<!-- 進行三等分 -->
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
<div>
<em>1</em>
<em>2</em>
<em>3</em>
</div>
<!-- 不使用flex -->
<div class="block_div">
<i>1</i>
<i>2</i>
<i>3</i>
</div>
</body>
</html>
4.2 align-self控制子項自己在側軸上的排列方式
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。默認值為
auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。案例演示 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"
,maximum-scale=1.0,minimum-scale=1.0>
<title>align-self和order</title>
<style>
div {
display: flex;
width: 80%;
height: 500px;
background-color: pink;
/* 這會將三個盒子一起下移 */
/*align-items: flex-end;*/
}
div span {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px;
}
div span:nth-child(1) {
align-self: flex-end;
}
div span:nth-child(3) {
align-self: flex-end;
}
/* 可以使用order 交換盒子之間的順序 */
div span:nth-child(2) {
order: 3;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
4.3 order 屬性定義項目的排列順序
數值越小，排列越靠前，默認為0。
注意：和 z-index 不一樣。
