FLEXBOX(彈性盒佈局模型)以及適用場景
FLEX佈局是什麼？
2009年，W3C提出了一種新的佈局方案—-Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。 目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
2.知識剖析
一，怎麼運用FLEX佈局
flex佈局非常靈活，任一容器都可以指定為flex佈局。塊狀只需要display屬性規定為flex即可。 行內元素也可以指定為flex佈局，將display屬性設定為inline-flex。 還有WebKit核心的瀏覽器需要加上-webkit字首。 需要注意的是設定成為flex佈局之後，子元素的float，clear，text-align，vertical-align就會失效。
二，基本概念
採用flex佈局的元素就被稱為flex容器（flex contain），它的所有子元素稱為flex專案（flex item）。 容器預設存在兩根軸線，一根主軸（main axis）一根交叉軸（cross axis）。 專案預設沿主軸排列，單個專案佔據的主軸空間叫main size，佔據的交叉軸空間叫cross size.
三. FLEX-BOX容器屬性
flex-box(容器)和flex-item(專案)各自都有不同的屬性。通過對它們進行不同的設定來對整體佈局進行調整以達到想要的效果。
flex-box容器的主要屬性有:
1.flex-direction 決定專案在主軸的排列方向。
2.flex-wrap 決定如果一條軸線排不下了，該如何換行。
3.flex-row 是flex-direction和wrap的簡寫形式，預設row nowrap。
4.justify-content 決定專案在主軸方向上如何對齊。
5.align-items 決定專案在交叉軸上如何對齊。
6.align-content 定義多根軸線如何對齊。FLEX-DIRECTION
FLEX-DIRECTION屬性決定主軸的方向（即專案的排列方向）。
1.flex-direction: row;表示預設值，主軸在水平方向，從左到右。 FLEX-WRAP
預設情況下，專案都排在一條線（又稱”軸線”）上。FLEX-WRAP屬性定義，如果一條軸線排不下，如何換行。
1.flex-wrap: nowrap;也是這個屬性的預設值，表示不換行，專案等比例縮小（如果沒規定flex-shrink為0的情況下）。 FLEX-FLOW
FLEX-FLOW屬性是FLEX-DIRECTION屬性和FLEX-WRAP屬性的簡寫形式，預設值為ROW NOWRAP。
flex-flow: flex-direction || flex-wrap;
JUSTIFY-CONTENT
JUSTIFY-CONTENT屬性定義了專案在主軸上的對齊方式。
1.flex-start: 也是這個屬性的預設值，表示主軸起點對齊。
2.flex-end: 主軸終點對齊
3.center: 居中
4.space-between: 兩端對齊，專案之間的間隔都相等。
5.space-around: 每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。ALIGN-ITEMS
ALIGN-ITEMS屬性定義專案在交叉軸上如何對齊。
1.flex-start: 也是這個屬性的預設值，表示交叉軸起點對齊。
2.flex-end: 交叉軸終點對齊
3.center: 居中
4.stretch（預設值）: 如果專案未設定高度或設為auto，將佔滿整個容器的高度。
5.baseline: 專案的第一行文字的基線對齊。ALIGN-CONTENT
ALIGN-CONTENT屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
1.flex-start: 與交叉軸的起點對齊。
2.flex-end: 交叉軸終點對齊。
3.center: 與交叉軸的中點對齊。
4.space-between: 與交叉軸兩端對齊，軸線之間的間隔平均分佈。
5.space-around: 專案的第一行文字的基線對齊。
6.stretch(預設值): 軸線佔滿整個交叉軸。四. FLEX專案屬性
flex專案的屬性也有6個。專案的屬性有:
1.order 決定專案的排列順序，數值越小，排列越靠前。
2.flex-grow 決定專案的放大比例，預設值是0，也就是存在剩餘空間，不放大。
3.flex-shrink 是也就是決定專案的縮小比例，預設是1，表示剩餘空間不足時，等比縮小，如果需要不變，可以設定為0。
4.flex-basis 定義了在分配多餘專案之前，專案佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
5.flex 是以上三個的簡寫，預設0 1 auto，也就是不放大，不縮小，佔據專案本來大小的主軸空間。該屬性有兩個快捷值: auto (1 1 auto) 和 none (0 0 auto)，這裡也不過多贅述。
6.align-self屬性 預設auto，繼承flex容器，也就是父元素的align-items屬性，專案和algn-items一樣，只是決定單個item對交叉軸的對齊方式。3.常見問題
display:flex可以複合使用嗎？
4.解決方案
答案是可以的，一個元素可以是一個display的子元素同時也是另外一個display的父元素。
5.程式碼實戰
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>flex編碼實戰</title>
<style>
body {
display: flex;
/*flex-direction: column;*/
/*flex-wrap: wrap;*/
/*flex-wrap: wrap-reverse;*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-between;*/
/*justify-content: space-around;*/
/*align-items: center;*/
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: baseline;*/
/*align-content: center;*/
/*align-content: space-between;*/
/*align-content: space-around;*/
/*align-content: stretch;*/
width: 80vw;
height: 80vh;
margin: 2rem auto;
border: 1px solid #000;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
/*order: 5;*/
flex-shrink: 0;
width:30%;
height:30%;
border: 1px solid #ff0000;
}
.box2 {
width:60%;
height: 60%;
background-color: #ffff00;
}
.box3 {
width: 30%;
height:30%;
background-color: #d58512;
}
.box4 {
width: 20%;
height: 30%;
background-color: #2aabd2;
}
.box5 {
/*align-self: flex-end;*/
/*flex-shrink: 0;*/
/*flex-grow: 1;*/
width: 10%;
height: 20%;
background-color: #32c086;
}
.box6 {
width: 50%;
height: 40%;
background-color: #5fc0cd;
}
</style>
</head>
<body>
<div class="box1">1
<div class="box2">2</div>
</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</body>
</html>