網頁佈局是CSS的一個重點
normal flow（文件流）
float + clear
position relative + absolute
display
負margin
這些屬性在進行頁面佈局時，組合使用以實現所需要的頁面，但對於一些特殊的佈局，實現就有些麻煩了
1 Flex佈局介紹
Flex 是 Flexible Box 的縮寫，意思為“彈性佈局”
1.1 Flex佈局的特點
- 塊級佈局側重垂直方向、行內佈局側重水平方向，而Flex佈局是與方向無關的
- Flex佈局可以實現空間自動分配、自動對齊（彈性、靈活）
- Flex佈局適用於簡單的線性佈局，更復雜的佈局使用Grid佈局
1.2 開啟Flex佈局
開啟Flex佈局時，只需要在父級元素上寫上display: flex;，具體如下所示：
.box{
display: flex;
}
//行內元素也可以
.box{
display: inline-flex;
}
//Webkit核心的瀏覽器，需加上字首
.box{
display: -webkit-flex;
}
複製程式碼1.3 Flex容器基本概念
採用Flex佈局的元素，可以看做一個Flex容器，其屬性表示如下圖所示：
flex-direction來改變主側軸的分佈方向。所以並不能說，水平分佈的是主軸，垂直分佈的是側軸。
2 父元素的屬性
Flex佈局的父元素共有6中屬性可以設定，分別為：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
2.1 flex-direction
flex-direction屬性決定主軸的方向（前面說過，不能說水平是主軸，垂直是側軸，就是因為這個屬性），它一共有4個值：
row: 預設值，主軸為水平方向從左到右；
row-reverse: 主軸為水平方向從右到左；
column: 主軸為垂直方向從上到下；
column-reverse: 主軸為垂直方向從下到上
示意圖為：
程式碼實現效果如下：
2.2 flex-wrap
預設的情況下，Flex容器中的子元素都排在一行，如果子元素的總寬度大於父元素的寬度，子元素就會被壓縮。flex-wrap屬性可以設定子元素換行，它一共有3個值：
nowrap: 預設值，不換行
wrap: 換行，第一行在上方
wrap: 換行，第一行在下方
示意圖為：
程式碼實現效果圖為：
2.3 flex-flow
flex-flow屬性是flex-direction和flex-wrap的組合，它是將這兩個屬性寫到一起，先寫flex-direction，後寫flex-wrap，預設值為row nowrap
程式碼實現效果圖為：
2.4 justify-content
justify-content屬性定義子元素在主軸上的對齊方式，它主要有5種取值：
flex-start: 預設值，從起點開始
flex-end: 從終點對齊
cneter: 居中對齊
space-between: 兩端對齊，子元素之間的間隔相等
space-around: 每個子元素的左右間隔相等
示意圖為：
程式碼實現效果圖為：
2.5 align-items
align-items屬性定義子元素在側軸上的對齊方式，主要由5種取值：
strech: 預設值，子元素的高度鋪滿父元素
flex-start: 子元素從側軸起點對齊
flex-end: 子元素從側軸終點對齊
center: 子元素根據側軸居中對齊
baseline: 根據子元素第一行文字的基線對齊(當字型大小不一致時，突出效果)
注意： 應用此屬性時，子元素的高度不能寫死，應該由其內容撐起來
示意圖為：
程式碼實現效果圖為：
2.6 align-content
align-content屬性定義子元素多根軸線在側軸上的對齊方式，只在多行顯示下有效。主要取以下5個值：
stretch: 預設值，軸線鋪滿側軸
flex-start: 與側軸起點對齊
flex-end: 與側軸終點對齊
center: 與側軸中點對齊
space-between: 與側軸兩端對齊，軸線之間的間隔相等
space-around: 每根軸線兩側的間隔相等
示意圖為：
程式碼實現效果圖為：
3 子元素屬性
Flex佈局的子元素共有6種屬性可以設定，分別為：
flex-grow
flex-shrink
flex-basis
flex
order
align-self
3.1 flex-grow
flex-grow屬性表示當父元素空間有剩餘時，將剩餘空間分配給各子元素的比例，預設為0，表示不分配；當為數值時，表示父元素剩餘空間分配給各子元素的比例，不是擴張後子元素的尺寸比例
程式碼實現效果圖為：
3.2 flex-shrink
flex-shrink屬性與flex-grow屬性的作用相反，表示當子元素寬度總和大於父元素寬度，且未換行顯示時，各子元素壓縮大小，預設為1，表示各子元素等比壓縮；當數值不一時，表示各子元素因為壓縮空間而減小的尺寸的比例，不是壓縮後子元素尺寸的比例
程式碼實現效果圖為：
3.3 flex-basis
flex-basis屬性可以用來設定子元素的空間，預設值為auto，表示為原本大小。當父元素有剩餘空間時，可通過此屬性擴充子元素的空間；各子元素通過擴孔之後的空間總和超過了父元素的空間大小時，按flex-basis值比例來設定子元素的大小，沒有flex-basis屬性時，預設flex-basis值為子元素原本大小，使子元素大小總和不得超過父元素空間大小
程式碼實現效果圖為：
3.4 flex
flex屬性是flex-grow、flex-shrink和flex-basis的合集，預設值為0 1 auto，後兩個屬性可不寫
3.5 order
order屬性定義子元素在排列順序，預設值為0，值越小越靠前
程式碼實現效果圖為：
3.6 align-self
align-self屬性允許子元素單獨設定對齊方式，優先順序比父元素的align-items高。預設值為auto，表示繼承父元素的align-items，如果沒有父元素，則等同於stretch。其可設定以下屬性：
auto: 繼承父元素的
align-items
stretch
flex-start
flex-end
center
baseline
除了auto值，其他值與父元素的align-items屬性效果一樣
4 幾個flex佈局
4.1 上中下佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
display: flex;
flex-direction: column;
height: 100vh;
}
header{
height: 100px;
background: #ddd;
}
main{
flex-grow: 1;
}
footer{
height: 100px;
background: #ddd;
}
</style>
</head>
<body>
<header>heafer</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>
複製程式碼程式碼效果圖為：
4.2 九宮格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
*{padding:0;}
ul{
list-style: none;
border: 1px solid black;
width: 170px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
li{
width: 50px;
height: 50px;
border: 1px solid red;
margin: 5px 0;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
複製程式碼程式碼效果圖為：
4.3 一般PC佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body{
display: flex;
flex-direction: column;
height: 100vh;
}
header{
height: 50px;
background: #ddd;
}
main{
flex-grow: 1;
display: flex;
}
.aside1{
width: 100px;
background: #aaa;
}
.aside2{
flex-grow: 1;
}
.aside3{
width: 100px;
background: #aaa;
}
footer{
height: 50px;
background: #ddd;
}
</style>
</head>
<body>
<header>header</header>
<main>
<aside class="aside1">aside1</aside>
<aside class="aside2">aside2</aside>
<aside class="aside3">aside3</aside>
</main>
<footer>footer</footer>
</body>
</html>
複製程式碼程式碼效果圖為：
4.4 自適應絕對居中
複製程式碼程式碼效果圖為：