flex布局具有便捷、靈活的特點，熟練的運用flex布局能解決大部分布局問題，這里對一些常用布局場景做一些總結。
web頁面布局(topbar + main + footbar)
示例代碼
要實現的效果如下：
html代碼：
<div class="container"> <header>header...</header> <main>內容</main> <footer>footer...</footer> </div> css代碼：
header{
height:100px;
background:#ccc; } footer{ height:100px; background:#ccc; } .container{ display:flex; flex-direction:column; height:100vh; } main{ flex-grow:1; } 應用的flex屬性
本例中主要應用了以下flex屬性：
- flex-direction:column 使整體布局從上到下排列
- flex-grow:1, 應用於main，使得main自動填充剩余空間
本例中應用以較少的css代碼實現了傳統的上中下頁面布局，其中的關鍵通過flex-grow的使用避免了當main內容過少時footer部分會被提升到頁面上方的問題(傳統方式上可能需要靠絕對定位來解決了~)
每行的項目數固定並自動換行的列表項
要實現的效果如下：
html代碼：
示例代碼
css代碼：
ul{
display:flex;
flex-wrap:wrap;
}
li{
list-style:none;
flex:0 0 25%;
background:#ddd; height:100px; border:1px solid red; } 應用的flex屬性
本例中主要應用了以下flex屬性：
-
flex:0 0 25%,相當於flex-basis:25%，使得每一個列表項的寬度占外層容器(本例中的ul元素)的25%，因此每行最多能夠排開四個列表項。
-
flex-wrap:wrap,使得每行填滿時會自動換行
實現自動划分多余空間的列表項
本例的效果和上例中的圖2很相似，只是每行為3個固定寬度的列表項，並且各列表項之間留有相同寬度的空隙
傳統方式上實現這種效果，不可避免的要用到負margin，那么現在來看了用flex實現的方式吧
示例代碼
css代碼：
ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
border:1px solid black;
}
li{
list-style:none;
width:120px;
background:#ddd; height:100px; border:1px solid red; } 應用的flex屬性
本例中主要應用了以下flex屬性：
- justify-content:space-between;使主軸方向的多余空間平均分配在兩兩item之間
平均分配空間的柵格布局
各大UI里柵格布局基本是必備的布局之一，平均分配布局又是柵格布局里最常用的布局，利用flex實現平均分配的柵格布局，關鍵之處就是利用它的自動收縮空間。
示例
html如下：
<div class="row"> <div class="column">column1</div> <div class="column">colum22</div> <div class="column">colum322</div> </div> css如下：
.row{
display:flex;
flex-wrap:wrap;
border:1px solid black;
}
.column{
list-style:none;
background:#ddd; flex:1; height:100px; border:1px solid red; } 應用的flex屬性
本例中主要應用了以下flex屬性：
- flex:1 這里針對item應用了flex:1,相當於flex:1 1 0%,而之所以不管各個column元素內容的寬度為多大，都能均分到相等的空間，正式因為相當於在設置了flex-grow:1使得剩余空間按相等比例自動分配的同時又設置了flex-basis:0%,才使得整個空間都平均分配了。
聖杯布局
傳統的聖杯布局需要涉及絕對定位、浮動、負margin等幾大最頭疼屬性，有了flex布局以后發現，原來這么簡單的配方，也能實現這么復雜的效果哈~
示例代碼
html代碼：
<div class="container"> <main>main</main> <aside>aside</aside> <nav>nav</nav> </div> css代碼：
.container{
display:flex;
height:100vh;
}
aside{
width:50px;
background:#ccc; } main{ flex-grow:1; background:#def; } nav{ width:80px; background:#ccc; order:-1; } 應用的flex屬性
- 對main用flex-grow:1,使得中間主元素空間自動擴充
- 對nav應用order:-1,使得order處於最左側(html中main寫在了最前，以利於優先加載主內容區)
元素水平垂直居中
如何讓一個元素同時水平垂直居中？答案很多樣也很復雜，但是在這么多樣化得答案中flex絕對是最簡單的一種了~
示例代碼
html代碼：
<div class="container"> <div class="inner">我是中間的內容</div> </div> css代碼：
.container{
height:300px;
width:300px;
border:1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.inner{
border:1px solid black;
}
應用的flex屬性
- justify-content:center;使item元素水平居中
- align-items:center;使item元素垂直居中