1. flex佈局體驗
傳統佈局 flex彈性佈局
兼容性好 操作方便，佈局極爲簡單，移動端應用很廣泛
佈局繁瑣 PC端瀏覽器支持情況較
侷限性，不能再移動端很好的佈局 IE 11或更低版本，不支持或僅部分支持
建議：
1. 如果是PC端頁面佈局，我們還是傳統佈局。
2. 如果是移動端或者不考慮兼容性問題的PC端頁面佈局，我們還是使用flex彈性佈局。
初體驗
1. 搭建HTML結構
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: darkorange;
justify-content: space-around;
}
div span{
/* width: 150px; */
height: 100px;
background-color: forestgreen;
margin-right: 5px;
flex: 1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
網頁顯示：
2. flex佈局原理
1. 佈局原理
flex是flexible的縮寫，意爲“彈性佈局”，用來爲盒狀模型提供最大的靈活性，任何一個容器都可以指定爲flex佈局。
當我們爲父盒子設爲flex佈局以後，子元素的float、clear和vertical-align屬性將失效。
伸縮佈局 = 彈性佈局 = 伸縮盒佈局 = flex佈局
採用flex佈局的元素，稱爲flex容器（flex container），簡稱“容器”。 它的所有子元素自動成爲容器成員，稱爲flex
項目（flex item ），簡稱“項目”。
體驗中 div就是flex父容器。
體驗中span就是子容器flex項目。
子容器可以橫向排列也可以縱向排列。
總結flex佈局原理：
就是通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式。
3. flex佈局父項常見屬性
1. 常見父項屬性
一下由6個屬性是對父元素設置的
flex-direction： 設置主軸的方向
justify-content： 設置主軸上的子元素排列方式
flex-wrap： 設置子元素是否換行
align-content： 設置側軸上的子元素的排列方式（多行）
align-items： 設置側軸上的子元素的排列方式（單行）
flex-flow： 複合屬性，相當於同時設置了flex-direction和flex-wrap
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 80%;
height: 300px;
background-color: darkorange;
/* 默認的主軸是 x軸 row */
flex-direction: row;
/* justify-content: 是設置主軸上子元素的排列方式; */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* 讓我們子元素居中對齊 */
/* justify-content: center; */
/* 平分剩餘空間 */
justify-content: space-around;
}
div span{
width: 150px;
height: 100px;
background-color: forestgreen;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
網頁顯示：
2. flex-direction 設置主軸的方向
1. 主軸與側軸
在flex佈局中，是分爲主軸和測軸兩個方向，同樣的叫法有：行和列、 x軸和y軸
默認主軸方向就是x軸方向，水平向右
默認側軸方向就是y軸方向，水平向下
2. flex-firection 設置主軸的方向
2. 屬性值
flex-direction屬性決定主軸的方向（及項目的排列方向）
注意：主軸和側軸是會變化的，就看flex-direction 設置誰爲主軸，剩下的就是側軸。
而我們的子元素是跟着主軸來排列的。
| 屬性值 | 說明 |
| row | 默認值從左到右 |
| row-reverse | 從右到左 |
| column | 從上到下 |
| column-reverse | 從下到上 |
3. justify-content 設置主軸上的子元素排列方式
justify-content 屬性定義了項目在主軸上的對齊方式
注意：使用這個屬性之前一定要確定好主軸是哪個。
| 屬性值 | 說明 |
| flex-start | 默認值從頭部開始如果主軸都是x軸，則從左到右 |
| row-reverse | 從尾部開始排列 |
| center | 在主軸居中對齊（如果主軸是x軸則水平居中） |
| space-around | 平 分剩餘空間 |
| space-between | 先兩邊貼邊 在評分剩餘空間（重要）從下到上 |
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
/* 給父級添加flex屬性 */
display:flex;
width: 800px;
height: 300px;
background-color: darkorange;
/* 默認的主軸是 x 軸 行 row 那麼y軸就是側軸 */
/* 我們的元素是跟這主軸來排列的 */
/* flex-direction: row; */
/* 簡單瞭解 翻轉 */
/* flex-direction: row-reverse; */
/* 我們可以把我們的主軸設置爲y軸那麼 x軸就成了側軸 */
flex-direction: column;
}
div span{
width: 150px;
height: 100px;
background-color: forestgreen;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
網頁顯示圖：
flex佈局子項常見屬性
1. align-self 控制子項自己在側軸上的排列方式
ailgn-self 屬性允許單個項目由於其他項目不一樣的對齊方式，可覆蓋align-items屬性。
默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch 。
span:nth-child(2){
/*設置自己在側軸上的排列方式*/
align-self:flex-end;
}
2. order屬性定義項目的排列順序
數值越小，排列越靠前，默認爲0.
注意：和z-index不一樣。
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: forestgreen;
/* 讓三個字盒子沿着側軸底側對齊 */
/* align-items: flex-end; */
/* 我們想只讓3號盒子下來底側 */
}
div span{
width: 150px;
height: 100px;
background-color: fuchsia;
margin-right: 5px;
}
div span:nth-child(2){
/* 默認是0 -1比0小所以在前面 */
order: -1;
}
div span:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
網頁顯示圖：
