1.傳統(tǒng)布局和flex布局對比
1.1 傳統(tǒng)布局
兼容性好。
布局繁瑣凌受。
局限性，不能再移動端很好的布局思杯。
1.2 flex 布局
操作方便胜蛉，布局極其簡單，移動端使用比較廣泛色乾。
pc端瀏覽器支持情況比較差誊册。
IE11或更低版本不支持flex或僅支持部分。
1.3 建議
如果是pc端頁面布局暖璧，還是采用傳統(tǒng)方式案怯。
如果是移動端或者是不考慮兼容的
pc則采用flex。
2. flex布局原理
flex是flexible Box的縮寫澎办，意為"彈性布局"嘲碱，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局局蚀。當我們?yōu)楦负凶釉O為
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 設置側軸上的子元素的排列方式（多行）
- 設置子項在側軸上的排列方式 并且只能用于子項出現(xiàn) 換行 的情況（多行），在單行下是沒有效果的妻味。
3.6 align-content 和 align-items 區(qū)別
align-items適用于單行情況下正压， 只有上對齊、下對齊责球、居中和 拉伸焦履。align-content適應于換行（多行）的情況下（單行情況下無效）拓劝， 可以設置 上對齊、下對齊嘉裤、居中郑临、拉伸以及平均分配剩余空間等屬性值。總結就是單行找
align-items多行找align-content屑宠。
3.7 flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex-flow:row wrap;
4. flex 布局子項常見屬性
flex子項目占的份數(shù)厢洞。align-self控制子項自己在側軸的排列方式。order屬性定義子項的排列順序（前后順序）典奉。
4.1 flex 屬性（重要）
flex屬性定義子項目分配剩余空間躺翻，用flex來表示占多少份數(shù)。案例演示:
<!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 屬性定義項目的排列順序
數(shù)值越小笨触，排列越靠前懦傍，默認為0。
注意：和 z-index 不一樣芦劣。
