flex與佈局（基本網格佈局、百分比佈局、一側固定一側自適應、聖盃佈局）
1、基本網格佈局
分情況討論：
（1）如果所有的專案有相同的結構
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-shrink壓縮</title>
<style>
.container{
padding-top:20px;
display: flex;
width: 500px;/*當容器container的寬度200<專案item的寬度150*2 */
height: 400px;
background-color:#fff;
border: 2px solid #ddd;
}
.item{
height: 30px;
flex-grow: 1;
flex-basis: 50%; 2、百分比佈局
作用：希望多個專案的寬度的比例是固定的。
若為3個：item1、item2、item3
item1——flex：1 1 auto；
item2——flex：2 1 auto；
item3——flex：3 1 auto；
該佈局主要是以改變flex-grow的值，作為瓜分容器container寬度的標準。
例項程式碼如下所示（僅修改上述style部分程式碼）：
.item{
height: 30px;
}
.item1{
background-color: #ccc;
flex-grow:1; 3、一側固定、一側自適應
該佈局採用的是上述講的專案屬性flex，一個設定為“固定的畫素”，一個設定為自適應auto。
.item{
height: 30px;
/*flex-grow: 1;
flex-basis: 50%;*/
}
.item1{
background-color: #ccc;
flex:0 1 100px;
}
.item2{
background-color: #999;
flex:1 1 auto;
}
.item3{
background-color: #ccc;
flex:0 1 200px;
}4、導航兩端對齊
A.正常情況，即沒有使用flex彈性佈局時，佈局方式主要通過“margin：auto”來實現。
（1）“Auto”計算過程，即實現原理：
對於塊狀元素而言，要獨佔一行（再不給width情況下，它會充滿一整行）；
如果給該元素設定了width，但在水平方向上，還有剩餘的空間（它的寬度比外部容器的寬度小），這個空 間就會被用來計算。
（2）當一側固定一側自適應時，auto就是整個剩餘空間，另一側是固定值
（3）當兩側都是auto時，即會平均分配剩餘空間。
思考：為什麼不能垂直方向居中呢？
對於元素而言，如果不設定佈局，即在垂直方向上，它不會鋪滿整個列，因此，垂直方向上，沒有多餘的列 賦予該元素。
例1：普通案例如下,即使用的是display:block,只能實現水平方向上的居中——
<style>
.container{
width: 500px;height: 400px;
border: 2px solid #ddd;display：block；
}
.item{
width: 50px;height: 50px;
background:#ccc;
margin:0 auto;
/*只能實現水平居中*/
}
</style>
<div class="container">
<div class="item">
居中
</div>
</div>
例2：使用flex進行彈性佈局時，
採用margin：auto，既可以實現四個方向上的正中間。
（1）即在container中，使用display:flex 代替 display:block;
（2）在item中，使用“margin:auto;”，即實現了四個方向居中。
5、媒體查詢
當頁面的寬度<=600px時，樣式會產生效果，
（1）把主軸方向從預設的水平改為垂直方向；
（2）把專案在主軸方向排列位置關係，將“jusity-content:space-around”改為“jusity-content:flex-start
.container{
padding-top: 20px;
display: flex;
width: 500px;height: 400px;
background-color: #fff;
border: 2px solid #ddd;
justify-content: space-around; /*容器兩端對齊*/
}
/*媒體查詢*/
@media(max-width:600px){
.container{
flex-direction: column; /*水平變垂直*/
justify-content: flex-start;
}
}6、聖盃佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex-shrink壓縮</title>
<style>
body{
display: flex;
flex-flow: column nowrap;
}
body >*{
text-align: center;
color:#fff;
font-size: 30px;
}
header,footer{
background: #333;
height: 50px;
}
section{
display: flex;
}
nav{
width: 100px;
background: #aaa;
flex:0 1 100px;
}
.main{
width: 500px;
background: #ccc;
flex: 1 1 auto;
}
.sliderbar{
width: 150px;
background: #eee;
flex:0 1 150px;
order:-1; /*注意：用於調整次序*/
}
</style>
</head>
<body>
<header>
頭部
</header>
<section>
<nav>導航</nav>
<div class="main">主體部分
<p>item1</p>
<p>item1</p>
<p>item1</p>
<p>item1</p>
</div>
<div class="sliderbar">側邊欄</div>
</section>
<footer>
尾部
</footer>
</body>
</html>
7、圖文混排
（1）搭建結構
（2）設定樣式