參考：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

下面程式碼可能會比較多，但核心CSS程式碼已經用 /**/ 的標記標出，直接看核心程式碼就好。

一、網格佈局

1、基本網格佈局

最簡單的網格佈局，就是平均分佈。在容器裡面平均分配空間即可（flex:1）

注：flex:1 等價於 flex: 1 1 0%;
flex: 1 1 0%; 等價於 flex-grow:1; flex-shrink:1; flex-basic:0;

<style type="text/css">
.grid{
	display: flex;           /*1*/
}
.grid-cell{
	flex:1;                  /*2*/
	border: 1px solid red;
	height: 30px;
	margin: 10px 15px;
}
.larger-height{
	height: 200px;
}
</style>

<div class="grid">
	<div class="grid-cell">1/2</div>
	<div class="grid-cell">1/2</div>
</div>
<div class="grid">
	<div class="grid-cell">1/3</div>
	<div class="grid-cell">1/3</div>
	<div class="grid-cell">1/3</div>
</div>
<div class="grid">
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
	<div class="grid-cell">1/4</div>
</div>
<div class="grid">
	<div class="grid-cell larger-height">Woohoo!</div>
	<div class="grid-cell larger-height">dasdasd sdsscdasd asadasd</div>
</div>
 

2、百分比佈局

某個網格的寬度為固定的百分比(如下圖的1/2、1/3、1/4)，其餘網格平均分配剩餘的空間。

<style type="text/css">
.grid{
	display: flex;        /*1*/
}
.grid-cell{
	flex:1;               /*2*/
	border: 1px solid red;
	height: 30px;
	margin: 10px 15px;
	text-align: center;
}
.u-1of2{
	flex:0 0 50%;	       /*3*/
}
.u-1of3{
	flex:0 0 33.3333%;	   /*4*/
}
.u-1of4{
	flex:0 0 25%;	       /*5*/
}
</style>

<div class="grid">
  <div class="grid-cell u-1of2">1/2</div>
  <div class="grid-cell">auto</div>
  <div class="grid-cell">auto</div>
</div>
<div class="grid">
  <div class="grid-cell">auto</div>
  <div class="grid-cell u-1of3">1/3</div>
</div>
<div class="grid">
  <div class="grid-cell u-1of4">1/4</div>
  <div class="grid-cell">auto</div>
  <div class="grid-cell u-1of3">1/3</div>
</div>
 

二、聖盃佈局

聖盃佈局（Holy Grail Layout）指的是一種最常見的網站佈局。頁面從上到下，分成三個部分：頭部（header），軀幹（body），尾部（footer）。其中軀幹又水平分成三欄，從左到右為：導航、主欄、副欄。

<style type="text/css">
.box{
	display: flex;           /*1*/
    flex-direction: column;  /*2*/
}
.box-body{
	margin: 10px 0;
	height: 200px;
	display: flex;            /*3*/
}
.box-content{
	flex: 1;                  /*4*/
	margin: 0px 10px;
}
.box-nav,
.box-ads{
	/* (nav,ads)兩個邊欄的寬度設為12em */
	flex: 0 0 12em;           /*5*/
}
.box-nav{
	/* 導航放到最左邊 */
	order: -1;                /*6*/
}

.box header,
.box footer,
.box-content,
.box-nav,
.box-ads{
	border: 1px solid red;
}
</style>

<div class="box">
	<header>header</header>
	<div class="box-body">
		<div class="box-content">content</div>
		<div class="box-nav">nav</div>
		<div class="box-ads">ads</div>
	</div>
	<footer>footer</footer>
</div>
 

三、輸入框的佈局

我們常常需要在輸入框的前方新增提示，後方新增按鈕。

<style type="text/css">
.input {
  display: flex;    /*1*/
}
.input-field {
  flex: 1;          /*2*/
}
.input-item{
	border:1px solid gray;
}
</style>

<div class="input">
  <span class="input-item">icon</span>
  <input class="input-field">
  <button class="input-item">btn</button>
</div>

四、懸掛式佈局

有時，主欄的左側或右側，需要新增一個圖片欄。也可以理解成類似於微信聊天的場景：左邊或右邊為頭像，另一邊為文字內容。

這裡就不舉例子了，直接上核心程式碼，大家實際場景舉一反三即可：
（頭像在左，內容在右）

<style type="text/css">
.Media {
  display: flex;             /*1*/
  align-items: flex-start;   /*2*/
}
.Media-figure {
  margin-right: 1em;
}
.Media-body {
  flex: 1;                   /*3*/
}
</style>

<div class="Media">
  <img class="Media-figure" src="" alt="">
  <p class="Media-body">...</p>
</div>

五、固定的底欄

有時，頁面內容太少，無法佔滿一屏的高度，底欄就會擡高到頁面的中間。這時可以採用Flex佈局，讓底欄總是出現在頁面的底部。

為了方便演示，我們就做成這樣：

<style type="text/css">
.site{
  display: flex; 				/*1*/
  flex-direction: column; 		/*2*/
  min-height: 30vh;     		/*3*/
  border: 1px solid yellow;
}
.site-content {
  flex: 1;						 /*4*/
}
.site header,
.site main,
.site footer{
	border: 1px solid red;
}
</style>

<div class="site">
	<header>header</header>
  	<main class="site-content">main </main>
  	<footer>footer</footer>
</div>

如果我們去掉.site-content {flex:1}呢？
就會變成下面這樣，main變矮了。

六、流式佈局

每行的專案數固定，會自動分行。

注：實際場景中，由於會給.item加border，所以很容易讓item溢位box；所以我們這裡採用IE盒模型（ box-sizing: border-box;）來避免該情況發生。

<style type="text/css">
.box {
  width: 200px;
  height: 150px;
  background-color: black;
  display: flex;               /*2*/
  flex-flow: row wrap;         /*4*/
}
.item {
  box-sizing: border-box;      /*1*/
  background-color: white;
  flex: 0 0 25%;               /*3*/
  height: 50px;
  border: 1px solid red;
}
</style>

<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>