我們傳統的布局方式是基於在盒子模型下的，依賴於display屬性的，position屬性的或者是float屬性的，但是在傳統的布局上面並不好布局; 比如我們想讓某個元素垂直居中的話，我們常見的會讓其元素表現為表格形式，比如display:table-cell屬性什么的，我們現在來學習下使用flex布局是非常方便的;
目前的瀏覽器支持程度： IE10+，chrome21+，opera12.1+，Firefox22+，safari6.1+等;
如上瀏覽器的支持程度，我們可以把此元素使用在移動端很方便;
flex是什么呢？Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
flex的彈性布局有如下優勢：
1.獨立的高度控制與對齊。
2.獨立的元素順序。
3.指定元素之間的關系。
4.靈活的尺寸與對齊方式。
一：基本概念：
采用flex布局的元素，稱為flex容器，它的所有子元素自動成為容器成員，稱為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
1. flex-direction：該屬性決定主軸的方向(即項目的排列方向)。
它可能有四個值：
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
<div class="first-face container">
<span class="pip"></span>
</div>
<style>
html, body {
height: 100%;
}
.container {
width:150px;
height:150px;
border:1px solid red;
}
.first-face {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction:row;
display: -webkit-box;
-webkit-box-pack:start;
}
.pip {
display:block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #333;
}
</style>
注意：在android平台的uc瀏覽器和微信瀏覽器中使用display: flex;會出問題。不支持該屬性，因此使用display: flex;的時候需要加上display: -webkit-box; 還有一些水平對齊或者垂直對齊都需要加上對應的box-pack(box-pack表示父容器里面子容器的水平對齊方式)及box-align(box-align 表示容器里面子容器的垂直對齊方式）.具體的可以看如下介紹的 display:box屬性那一節。
我們可以看下截圖如下：
2. flex-wrap屬性 默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，可以換行。
它有如下三個值：
nowrap（默認）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
3. flex-flow
該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
4. justify-content屬性
justify-content屬性定義了項目在主軸上的對齊方式。下面假設主軸為從左到右。
值為如下：
flex-start | flex-end | center | space-between | space-around;
flex-start(默認值) 左對齊
flex-end 右對齊
center 居中
space-between： 兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等。
5. align-items屬性
align-items屬性定義項目在交叉軸上如何對齊。
它可能取5個值：
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
6. align-content屬性
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
該屬性可能取6個值。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
三：項目的屬性，以下有6個屬性可以設置在項目中，
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order屬性
order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
基本語法：
.xx {order: <integer>;}
2. flex-grow屬性
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大
基本語法：
.xx {
flex-grow: <number>;
}
3. flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
基本語法：
.xx {
flex-shrink: <number>;
}
4. flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
基本語法：
.xx { flex-basis: <length> | auto;}
它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。
5. flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
6. align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
基本語法：
.xx {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
實例
一： 1丙
HTML代碼：
<div class="first-face container">
<span class="pip"></span>
</div>
上面代碼中，div元素（代表骰子的一個面）是Flex容器，span元素（代表一個點）是Flex項目。如果有多個項目，就要添加多個span元素，以此類推。
css代碼結構如下：
<style>
html, body {
height: 100%;
}
.container {
width:150px;
height:150px;
border:1px solid red;
}
.first-face {
}
.pip {
display:block;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #333;
}
</style>
1. 首先，只有一個左上角的情況下，flex布局默認為左對齊，因此需要display:flex即可;如下代碼：
.first-face {
display: flex;
display: -webkit-box;
}
上面為了兼容UC瀏覽器和IOS瀏覽器下，因此需要加上display: -webkit-box;來兼容，我們也明白，如果不加上.first-face里面的代碼，也能做出效果，因為元素默認都是向左對齊的，如下圖所示：
我們繼續來看看對元素進行居中對齊; 需要加上 justify-content: center;即可;但是在UC瀏覽器下不支持該屬性，
我們水平對齊需要加上box-pack，box-pack表示父容器里面子容器的水平對齊方式，具體的值如上面介紹的box的語法，
需要加上 -webkit-box-pack:center; 因此在first-face里面的css代碼變為如下代碼：
.first-face {
display: flex;
display: -webkit-box;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
上面已經介紹過
justify-content屬性定義了項目在主軸上的對齊方式(水平方向上)，有五個值，這里不再介紹，具體可以看上面的基本語法。
水平右對齊代碼也一樣、因此代碼變成如下：
.first-face {
display: flex;
display: -webkit-box;
justify-content:flex-end;
-webkit-box-pack:end;
}
如下圖所示：
2. 我們接着來分別看看垂直居左對齊，垂直居中對齊，垂直居右對齊.
一：垂直居左對齊
我們現在需要使用上align-items屬性了，該屬性定義項目在交叉軸上如何對齊。具體的語法如上：
同樣為了兼容UC瀏覽器或其他不支持的瀏覽器，我們需要加上box-align 該屬性表示容器里面字容器的垂直對齊方式;具體的語法如上;
因此代碼變成如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
}
效果如下：
二：垂直居中對齊
現在垂直已經居中對齊了，但是在水平上還未居中對齊，因此在水平上居中對齊，我們需要加上justify-content屬性居中即可;
同樣為了兼容UC瀏覽器，需要加上 -webkit-box-pack:center;
代碼變為如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
三：垂直居右對齊
原理和上面的垂直居中對齊是一個道理，只是值換了下而已;代碼如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
justify-content:flex-end;
-webkit-box-pack:end;
}
效果如下：
3. 我們接着來分別看看底部居左對齊，底部居中對齊，底部居右對齊.
一：底部居左對齊
其實屬性還是用到上面的，只是值換了一下而已;代碼如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:flex-end;
-webkit-box-align:end;
justify-content:flex-start;
-webkit-box-pack:start;
}
效果如下：
二：底部居中對齊
代碼變為如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:flex-end;
-webkit-box-align:end;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
三：底部居右對齊
代碼變為如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:flex-end;
-webkit-box-align:end;
justify-content:flex-end;
-webkit-box-pack:end;
}
效果如下：
二：2丙
1. 水平上2端對齊; 需要使用的屬性justify-content: space-between;該屬性能使第一個元素在左邊，最后一個元素在右邊。
因此代碼變成如下：
.first-face {
display: flex;
justify-content: space-between;
}
但是在UC瀏覽器下不生效，因此我們需要 display: -webkit-box;和-webkit-box-pack:Justify;這兩句代碼;
display: -webkit-box;我不多介紹，上面已經講了，-webkit-box-pack:Justify;的含義是在box-pack表示水平等分父容器寬度。
因此為了兼容UC瀏覽器，所以代碼變成如下：
.first-face {
display: flex;
justify-content: space-between;
display: -webkit-box;
-webkit-box-pack:Justify;
}
效果如下：
2. 垂直兩端對齊;
垂直對齊需要使用到的flex-direction屬性，該屬性有一個值為column：主軸為垂直方向，起點在上沿。
代碼變為如下：
.first-face {
display: flex;
justify-content: space-between;
flex-direction: column;
}
再加上justify-content: space-between;說明兩端對齊.但是在UC瀏覽器並不支持該屬性，使其不能垂直兩端對齊，因此為了兼容UC瀏覽器，需要使用-webkit-box;因此
整個代碼變成如下：
.first-face {
display: flex;
justify-content: space-between;
-webkit-flex-direction: column;
flex-direction: column;
display: -webkit-box;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-box-pack:justify;
}
如上使用 -webkit-box-direction: normal; 使其對齊方向為水平從左端開始，-webkit-box-orient: vertical;使用這句代碼告訴
瀏覽器是垂直的,-webkit-box-pack:justify;這句代碼告訴瀏覽器垂直的兩端對齊。
如下圖所示：
3. 垂直居中兩端對齊
代碼如下：
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
多加一句 align-items: center;代碼; 表示交叉軸上居中對齊。同理在UC瀏覽器下不支持的，因此我們為了兼容UC瀏覽器，可以加上如下代碼，因此整個代碼如下：
.first-face {
display: flex;
justify-content: space-between;
-webkit-flex-direction: column;
flex-direction: column;
align-items:center;
display: -webkit-box;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-box-pack:justify;
-webkit-box-align:center;
}
再加上-webkit-box-align:center;這句代碼，告訴瀏覽器垂直居中。
如下圖所示：
4. 垂直居右兩端對齊
代碼如下：
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
同理為了兼容UC瀏覽器，整個代碼變成如下：
.first-face {
display: flex;
justify-content: space-between;
-webkit-flex-direction: column;
flex-direction: column;
align-items:flex-end;
display: -webkit-box;
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-webkit-box-pack:justify;
-webkit-box-align:end;
}
和上面代碼一樣，只是更改了一下垂直對齊方式而已;
如下圖所示：
注意：下面由於時間的關系，先不考慮UC瀏覽器的兼容
三：3丙
代碼如下：
HTML代碼：
<div class="first-face container">
<span class="pip"></span>
<span class="pip"></span>
<span class="pip"></span>
</div>
CSS代碼如下：
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.pip:nth-child(2) {
align-self: center;
}
.pip:nth-child(3) {
align-self: flex-end;
}
如下圖所示：
四： 4丙
代碼如下：
HTML代碼：
<div class="first-face container">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
CSS代碼如下：
.column{
display: flex;
justify-content: space-between;
}
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
如下圖所示：
五：5丙
HTML結構如下：
<div class="first-face container">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
css代碼如下：
.column{
display: flex;
justify-content: space-between;
}
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.first-face .column:nth-of-type(2){
justify-content: center;
}
如下圖所示：
六：6丙
HTML結構如下：
<div class="first-face container">
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
<div class="column">
<span class="pip"></span>
<span class="pip"></span>
</div>
</div>
css代碼如下：
.column{
display: flex;
justify-content: space-between;
}
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
如下圖所示：
