佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。
flex佈局，可以簡便，完整，響應式的實現各種頁面的佈局。所有瀏覽器都支持。
flex是彈性佈局的縮寫，用來爲盒狀模型提供最大的靈活性。
任何一個容器都可以指定爲flex佈局。
.box{
display: flex;
}
行內元素也可以使用flex佈局。
.box{
display: inline-box;
}
webkit內核的瀏覽器 必須加上-webkit前綴
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意：設置爲flex佈局以後，子元素的float,clear和vertical-algn等均無效。
採用flex佈局的元素，稱爲容器，內部元素都成爲項目
容器默認存在2根軸，水平的主軸和垂直的交叉軸，
。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
以下6個屬性設置在容器上
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
下面進行簡要介紹：
flex-dirction屬性決定主軸的方向 默認爲row 即爲水平方向。
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
nowwrap(默認) 不換行，wrap 換行 第一行在上方。
justify-content屬性定義了項目在主軸上的對齊方式。 可以設置水平對齊center
align-items屬性定義項目在交叉軸上如何對齊。若不改變主軸方向，則可以設置垂直對齊。
以下6個屬性設置在項目上。
orderflex-growflex-shrinkflex-basisflexalign-self
order屬性定義項目的排列順序，數值越小，越排在前面，默認爲0
.item {
order: <integer>;
}
flex-grow屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。
flex-shrink屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
具體教程可參見阮一峯的教程。其也有實戰篇。
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
實戰篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
自己實現的簡單實例。html代碼
<body>
<div class="content">
<p class="cao">曹</p>
<p class="chen">陳</p>
</div>
</body>
css代碼：
.content{
border: solid 2px;
height: 300px;
display:flex;
justify-content: center;
align-items: center;
}
.cao{
order: 2;
color: blue;
}
.chen{
order: 1;
align-self:flex-start
}
可以水平垂直居中，並且陳可以設置自己的對齊方式,這裏設置成了開始對齊。