H5移動端知識點總結
閱讀目錄
移動開發基本知識點
一. 使用rem作為單位
html { font-size: 100px; }
@media(min-width: 320px) { html { font-size: 100px; } }
@media(min-width: 360px) { html { font-size: 112.5px; } }
@media(min-width: 400px) { html { font-size: 125px; } }
@media(min-width: 640px) { html { font-size: 200px; } }
給手機設置100px的字體大小; 對於320px的手機匹配是100px，
其他手機都是等比例匹配; 因此設計稿上是多少像素的話，那么轉換為rem的時候，rem = 設計稿的像素/100 即可;
二. 禁用a,button,input,optgroup,select,textarea 等標簽背景變暗
在移動端使用a標簽做按鈕的時候或者文字連接的時候，點擊按鈕會出現一個 "暗色的"背景，比如如下代碼：
<a href="">button1</a>
<input type="button" value="提交"/>
在移動端點擊后 會出現"暗色"的背景，這時候我們需要在css加入如下代碼即可：
a,button,input,optgroup,select,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
三. meta基礎知識點：
1.頁面窗口自動調整到設備寬度，並禁止用戶及縮放頁面。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0" />
屬性基本含義：
content="width=device-width：
控制 viewport 的大小,device-width 為設備的寬度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
2.忽略將頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
3. 忽略Android平台中對郵箱地址的識別
<meta name="format-detection" content="email=no" />
4. 當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
5. 將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可選default、black、black-translucent -->
6. 需要在網站的根目錄下存放favicon圖標，防止404請求(使用fiddler可以監聽到)，在頁面上需加link如下：
<link rel="shortcut icon" href="/favicon.ico">
因此頁面上通用的模板如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>標題</title> <link rel="shortcut icon" href="/favicon.ico"> </head> <body> 這里開始內容 </body> </html>
四：移動端如何定義字體font-family
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}
五：在android或者IOS下 撥打電話代碼如下：
<a href="tel:15602512356">打電話給:15602512356</a>
六：發短信(winphone系統無效)
<a href="sms:10010">發短信給: 10010</a>
七：調用手機系統自帶的郵件功能
1. 當瀏覽者點擊這個鏈接時，瀏覽器會自動調用默認的客戶端電子郵件程序，並在收件人框中自動填上收件人的地址下面
<p><a href="mailto:tugenhua@126.com">發電子郵件</a></p>
2、填寫抄送地址;
在IOS手機下：在收件人地址后用?cc=開頭;
如下代碼：
<p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填寫抄送地址</a></p>
在android手機下，如下代碼：
<p><a href="mailto:tugenhua@126.com?879083421@qq.com">填寫抄送地址</a></p>
3. 填上密件抄送地址，如下代碼：
在IOS手機下：緊跟着抄送地址之后，寫上&bcc=，填上密件抄送地址
<a href="mailto:tugenhua@126.com?cc=879083421@qq.com&bcc=aa@qq.com">填上密件抄送地址</a>
在安卓下;如下代碼：
<p><a href="mailto:tugenhua@126.com?879083421@qq.com?aa@qq.com">填上密件抄送地址</a></p>
4. 包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現。如下代碼：
<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現</a></p>
5、包含主題，用?subject=可以填上主題。如下代碼：
<p><a href="mailto:tugenhua@126.com?subject=【邀請函】">包含主題，可以填上主題</a></p>
6、包含內容，用?body=可以填上內容(需要換行的話，使用%0A給文本換行)；代碼如下：
<p><a href="mailto:tugenhua@126.com?body=我來測試下">包含內容，用?body=可以填上內容</a></p>
7. 內容包含鏈接，含http(s)://等的文本自動轉化為鏈接。如下代碼：
<p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">內容包含鏈接，含http(s)://等的文本自動轉化為鏈接</a></p>
八：webkit表單輸入框placeholder的顏色值改變：
如果想要默認的顏色顯示紅色，代碼如下：
input::-webkit-input-placeholder{color:red;}
如果想要用戶點擊變為藍色，代碼如下：
input:focus::-webkit-input-placeholder{color:blue;}
九：移動端IOS手機下清除輸入框內陰影，代碼如下
input,textarea {
-webkit-appearance: none;
}
十：在IOS中 禁止長按鏈接與圖片彈出菜單
a, img {
-webkit-touch-callout: none;
}
calc基本用法
calc基本語法：
.class {width: calc(expression);}
它可以支持加，減，乘，除; 在我們做手機端的時候非常有用的一個知識點;
優點如下：
1. 支持使用 "+","-","*" 和 "/" 四則運算。
2. 可以混合使用百分比(%),px,em,rem等作為單位可進行計算。
瀏覽器的兼容性有如下：
IE9+，FF4.0+，Chrome19+，Safari6+
如下測試代碼：
<div class="calc">我是測試calc</div>
.calc{ margin-left:50px; padding-left:2rem; width:calc(100%-50px-2rem); height:10rem; }
box-sizing的理解及使用
該屬性是解決盒模型在不同的瀏覽器中表現不一致的問題。它有三個屬性值分別是：
content-box: 默認值(標准盒模型); width和height只包括內容的寬和高，不包括邊框，內邊距;
比如如下div元素：<div class="box">box</div>
css如下：.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:content-box;}
那么在瀏覽器下渲染的實際寬度和高度分別是：222px,222px; 因為在標准的盒模型下，在瀏覽器中渲染的實際寬度和高度包括
內邊距(padding)和邊框的(border);如下圖所示：
border-box: width與height是包括內邊距和邊框的，不包括外邊距，這是IE的怪異模式使用的盒模型，比如還是上面的代碼：
<div class="box">box</div>;
css代碼如下：
.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:border-box;}
那么此時瀏覽器渲染的width會是178px，height也是178px; 因為此時定義的width和height會包含padding和border在內;
使用這個屬性對於在使用百分比的情況下布局頁面非常有用，比如有兩列布局寬度都是50%;但是呢還有padding和border，那么這個
時候如果我們不使用該屬性的話(當然我們也可以使用calc方法來計算); 那么總寬度會大於頁面中的100%;因此這時候可以使用這
個屬性來使頁面達到100%的布局.如下圖所示：
瀏覽器支持的程度如下：
理解display:box的布局
display: box; box-flex 是css3新添加的盒子模型屬性，它可以為我們解決按比列划分，水平均分，及垂直等高等。
一：按比例划分：
目前box-flex 屬性還沒有得到firefox, Opera, chrome瀏覽器的完全支持，但我們可以使用它們的私有屬性定義firefox(-moz-)，opera(-o-)，chrome/safari（-webkit-）。box-flex屬性主要讓子容器針對父容器的寬度按一定的規則進行划分。 代碼如下：
<div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> <style> .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style>
如下圖所示：
注意：
1. 必須給父容器定義 display: box, 其子元素才可以進行划分。如上給id為p1設置box-flex設置為1，給id為p2設置box-flex為2，
說明分別給其設置1等分和2等分，也就是說給id為p1元素設置寬度為 300 * 1/3 = 100px; 給id為p2元素設置寬度為 300 * 2/3 = 200px;
2. 如果進行父容器划分的同時，他的子元素有的設置了寬度，有的要進行划分的話，那么划分的寬度 = 父容器的寬度 – 已經設置的寬度 。
再進行對應的划分。
如下圖所示：
二：box具體的屬性如下：
box-orient | box-direction | box-align | box-pack | box-lines
1. box-orient;
box-orient 用來確定父容器里的子容器的排列方式，是水平還是垂直，可選屬性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
一：horizontal | inline-axis
給box設置 horizontal 或 inline-axis 屬性效果表現一致。都可以將子元素進行水平排列.
如下html代碼：
<div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div> css代碼如下： <style> .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style>
如下圖所示：
二：vertical 可以讓子元素進行垂直排列;
css代碼如下：
<style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style>
如下圖所示：
三：inherit。 Inherit屬性讓子元素繼承父元素的相關屬性。
效果和第一種效果一樣，都是水平對齊;
2. box-direction
還是如下html代碼：
<div class="test"> <p id="p1">Hello</p> <p id="p2">W3School</p> </div>
box-direction 用來確定父容器里的子容器的排列順序，具體的屬性如下代碼所示：
normal | reverse | inherit
normal是默認值，按照HTML文檔里的結構的先后順序依次展示， 如果box-direction 設置為 normal，則結構順序還是 id為p1元素，id為p2元素。
reverse: 表示反轉。如果設置reverse反轉，則結構排列順序為 id為p2元素，id為p1元素。如下代碼：
css代碼如下：
<style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-direction:reverse; -webkit-box-direction:reverse; box-direction:reverse; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; border:1px solid blue; } </style>
如下圖所示：
3. box-align:
box-align 表示容器里面字容器的垂直對齊方式，可選參數如下表示：
start | end | center | baseline | stretch
1. 對齊方式 start：表示居頂對齊
代碼如下：
<style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:300px; height:200px; -moz-box-align:start; -webkit-box-align:start; box-align:start; } #p1{ -moz-box-flex:1.0; -webkit-box-flex:1.0; box-flex:1; height:160px; border:1px solid red; } #p2{ -moz-box-flex:2.0; -webkit-box-flex:2.0; box-flex:2; height:100px; border:1px solid blue; } </style>
如上 P1 高度為160px p2 為100px; 對齊方式如下圖所示：
如果改為end的話，那么就是 居低對齊了，如下：
center表示居中對齊，如下：
stretch 在box-align表示拉伸，拉伸與其父容器等高。如下代碼：
在firefox下 和父容器下等高，滿足條件，如下：
在chrome下不滿足條件；如下：
4. box-pack
box-pack表示父容器里面子容器的水平對齊方式，可選參數如下表示：
start | end | center | justify
box-pack:start; 表示水平居左對齊，對於正常方向的框，首個子元素的左邊緣被放在左側（最后的子元素后是所有剩余的空間）
對於相反方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）代碼如下所示：
<style> *{margin:0;padding:0;} .test{ display:-moz-box; display:-webkit-box; display:box; width:400px; height:120px; border:1px solid #333; -moz-box-pack:start; -webkit-box-pack:start; box-pack:start; } #p1{ width:100px; height:108px; border:1px solid red; } #p2{ width:100px; height:108px; border:1px solid blue; } </style>
如下圖所示：
box-pack:center; 表示水平居中對齊,均等地分割多余空間，其中一半空間被置於首個子元素前，另一半被置於最后一個子元素后; 如下圖所示：
box-pack:end; 表示水平居右對齊;對於正常方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）。
對於相反方向的框，首個子元素的左邊緣被放在左側（最后子元素后是所有剩余的空間）。如下圖所示：
box-pack:Justify：
在box-pack表示水平等分父容器寬度（在每個子元素之間分割多余的空間（首個子元素前和最后一個子元素后沒有多余的空間））
如下：
理解flex布局
我們傳統的布局方式是基於在盒子模型下的，依賴於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
我們分別來看下上面6個屬性有哪些值，分別代表什么意思。
1. flex-direction：該屬性決定主軸的方向(即項目的排列方向)。
它可能有四個值：
row（默認值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
我們來做幾個demo，來分別理解下上面幾個值的含義;我這邊只講解上面第一個和第二個值的含義，下面的也是一樣，
就不講解了; 比如頁面上有一個容器，里面有一個元素，看下這個元素的排列方向。
HTML代碼：(如沒有特別的說明，下面的html代碼都是該結構)：
<div class="first-face container"> <span class="pip"></span> </div>
css代碼如下：
<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屬性那一節。
我們可以看下截圖如下：
當我們把flex-direction的值改為 row-reverse后(主軸為水平方向，起點在右端)，我們截圖如下所示：
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;
}
上面是基本語法，感覺好模糊啊，看到這么多介紹，感覺很迷茫啊，下面我們趁熱打鐵來實現下demo。
我們很多人會不會打麻將呢？打麻將中有1-9丙對吧，我們來分別來實現他們的布局;
首先我們的HTML代碼還是如下(如果沒有特別的說明都是這樣的結構)：
一： 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; }
如下圖所示：
7,8,9丙也是一個意思，這里先不做了;
Flex布局兼容知識點總結
假設父容器class為 box,子項目為item.
舊版語法如下：
一：定義容器的display屬性。
舊語法如下寫法：
.box { display: -moz-box; display: -webkit-box; display: box; }
新版語法需要如下寫：
.box{ display: -webkit-flex; display: flex; }
或者 行內
.box{ display: -webkit-inline-flex; display:inline-flex; }
二：容器屬性(舊版語法)
1. box-pack 屬性;(水平方向上對齊方式)
box-pack定義子元素主軸對齊方式。
.box{ -moz-box-pack: center; -webkit-box-pack: center; box-pack: center; }
box-pack屬性總共有4個值：
.box{
box-pack: start | end | center | justify;
/*主軸對齊：左對齊（默認） | 右對齊 | 居中對齊 | 左右對齊*/
}
各個值的含義如下：
start:
對於正常方向的框，首個子元素的左邊緣被放在左側（最后的子元素后是所有剩余的空間)
對於相反方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）
end:
對於正常方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）。
對於相反方向的框，首個子元素的左邊緣被放在左側（最后子元素后是所有剩余的空間）。
center:
均等地分割多余空間，其中一半空間被置於首個子元素前，另一半被置於最后一個子元素后.
justify:
在每個子元素之間分割多余的空間（首個子元素前和最后一個子元素后沒有多余的空間）。
2.box-align 屬性(垂直方向上的對齊方式)
box-align定義子元素交叉軸對齊方式。
.box{ -moz-box-align: center; /*Firefox*/ -webkit-box-align: center; /*Safari,Opera,Chrome*/ box-align: center; }
box-align屬性總共有5個值：
.box{ box-align: start | end | center | baseline | stretch; /*交叉軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊並鋪滿*/ }
各個值的含義如下：
start:
對於正常方向的框，每個子元素的上邊緣沿着框的頂邊放置。
對於反方向的框，每個子元素的下邊緣沿着框的底邊放置。
end:
對於正常方向的框，每個子元素的下邊緣沿着框的底邊放置。
對於反方向的框，每個子元素的上邊緣沿着框的頂邊放置。
center:
均等地分割多余的空間，一半位於子元素之上，另一半位於子元素之下。
baseline:
如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對齊。
stretch:
拉伸子元素以填充包含塊
3.box-direction 屬性
box-direction定義子元素的顯示方向。
.box{ -moz-box-direction: reverse; /*Firefox*/ -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/ box-direction: reverse; }
box-direction屬性總共有3個值：
.box{ box-direction: normal | reverse | inherit; /*顯示方向：默認方向 | 反方向 | 繼承子元素的 box-direction*/ }
4.box-orient 屬性
box-orient定義子元素是否應水平或垂直排列。
.box{ -moz-box-orient: horizontal; /*Firefox*/ -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/ box-orient: horizontal; }
box-orient屬性總共有5個值：
.box{ box-orient: horizontal | vertical | inline-axis | block-axis | inherit; /*排列方向：水平 | 垂直 | 行內方式排列（默認） | 塊方式排列 | 繼承父級的box-orient*/ }
horizontal: 在水平行中從左向右排列子元素。
vertical: 從上向下垂直排列子元素。
inline-axis： 沿着行內軸來排列子元素（映射為 horizontal）。
block-axis： 沿着塊軸來排列子元素（映射為 vertical）。
inherit： 應該從父元素繼承 box-orient 屬性的值。
5.box-lines 屬性
box-lines定義當子元素超出了容器是否允許子元素換行。
.box{ -moz-box-lines: multiple; /*Firefox*/ -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/ box-lines: multiple; }
box-lines屬性總共有2個值：
.box{ box-lines: single | multiple; /*允許換行：不允許（默認） | 允許*/ }
single：伸縮盒對象的子元素只在一行內顯示
multiple：伸縮盒對象的子元素超出父元素的空間時換行顯示
6.box-flex 屬性。
box-flex定義是否允許當前子元素伸縮。
.item{ -moz-box-flex: 1.0; /*Firefox*/ -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/ box-flex: 1.0; }
box-flex屬性使用一個浮點值：
.item{ box-flex: <value>; /*伸縮：<一個浮點數，默認為0.0，即表示不可伸縮，大於0的值可伸縮，柔性相對>*/ }
7.box-ordinal-group 屬性
box-ordinal-group定義子元素的顯示次序，數值越小越排前。
.item{ -moz-box-ordinal-group: 1; /*Firefox*/ -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/ box-ordinal-group: 1; }
box-direction屬性使用一個整數值：
.item{ box-ordinal-group: <integer>; /*顯示次序：<一個整數，默認為1，數值越小越排前>*/ }
新版語法如下：
定義容器的display屬性：
.box{ display: -webkit-flex; /*webkit*/ display: flex; } /*行內flex*/ .box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; }
容器樣式
.box{ flex-direction: row | row-reverse | column | column-reverse; /*主軸方向：左到右（默認） | 右到左 | 上到下 | 下到上*/ flex-wrap: nowrap | wrap | wrap-reverse; /*換行：不換行（默認） | 換行 | 換行並第一行在下方*/ flex-flow: <flex-direction> <flex-wrap>; /*主軸方向和換行簡寫*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*主軸對齊方式：左對齊（默認） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/ align-items: flex-start | flex-end | center | baseline | stretch; /*交叉軸對齊方式：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文本基線對齊*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch; /*多主軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 上下平均分布*/ }
flex-direction值介紹如下：
row: 默認值。靈活的項目將水平顯示，正如一個行一樣。
row-reverse: 與 row 相同，但是以相反的順序。
column: 靈活的項目將垂直顯示，正如一個列一樣。
column-reverse: 與 column 相同，但是以相反的順序。
flex-wrap 值介紹如下:
nowrap: flex容器為單行。該情況下flex子項可能會溢出容器。
wrap: flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內部會發生斷行。
wrap-reverse： 換行並第一行在下方
flex-flow值介紹如下(主軸方向和換行簡寫)：
<flex-direction>: 定義彈性盒子元素的排列方向
<flex-wrap>：控制flex容器是單行或者多行。
justify-content值介紹如下：
flex-start: 彈性盒子元素將向行起始位置對齊。
flex-end: 彈性盒子元素將向行結束位置對齊。
center: 彈性盒子元素將向行中間位置對齊。
space-between: 第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結束位置的邊距對齊，
而剩余的伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等。
space-around: 伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
align-items值介紹如下:
flex-start: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline: 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch: 如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
align-content值介紹如下:
flex-start: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end: 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center: 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
space-between: 第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最后一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，
剩余的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
space-around: 各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最后一行后面的空間是其他空間的一半。
stretch: 各行將會伸展以占用剩余的空間。如果剩余的空間是負數，該值等效於'flex-start'。在其它情況下，剩余空間被所有行平分，以擴大它們的側軸尺寸。
子元素屬性
.item{ order: <integer>; /*排序：數值越小，越排前，默認為0*/ flex-grow: <number>; /* default 0 */ /*放大：默認0（即如果有剩余空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）*/ flex-shrink: <number>; /* default 1 */ /*縮小：默認1（如果空間不足則會縮小，值為0不縮小）*/ flex-basis: <length> | auto; /* default auto */ /*固定大小：默認為0，可以設置px值，也可以設置百分比大小*/ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /*flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto，*/ align-self: auto | flex-start | flex-end | center | baseline | stretch; /*單獨對齊方式：自動（默認） | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文本基線對齊*/ }
兼容寫法
1. 首先是定義容器的 display 屬性：
.box{ display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */ display: -webkit-flex; /* 新版本語法: Chrome 21+ */ display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */ }
這里還要注意的是，如果子元素是行內元素，在很多情況下都要使用 display:block 或 display:inline-block
把行內子元素變成塊元素（例如使用 box-flex 屬性），這也是舊版語法和新版語法的區別之一。
2. 子元素主軸對齊方式（水平居中對齊）
.box{ -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; }
兼容寫法新版語法的 space-around 是不可用的：如下新版語法space-around;
.box{ box-pack: start | end | center | justify; /*主軸對齊：左對齊（默認） | 右對齊 | 居中對齊 | 左右對齊*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*主軸對齊方式：左對齊（默認） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分布*/ }
3. 子元素交叉軸對齊方式（垂直居中對齊）
.box{ box-align: start | end | center | baseline | stretch; /*交叉軸對齊：頂部對齊（默認） | 底部對齊 | 居中對齊 | 文本基線對齊 | 上下對齊並鋪滿*/ align-items: flex-start | flex-end | center | baseline | stretch; /*交叉軸對齊方式：頂部對齊（默認） | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文本基線對齊*/ }
4. 子元素的顯示方向。
子元素的顯示方向可通過 box-direction + box-orient + flex-direction 實現，如下代碼：
1. 左到右(水平方向)
.box{ -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; }
2. 右到左(水平方向)
.box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-flex-direction: row-reverse; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; }
如上代碼：box 寫法的 box-direction 只是改變了子元素的排序，並沒有改變對齊方式，需要新增一個 box-pack 來改變對齊方式。
3. 上到下(垂直方向上)
.box{ -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
4. 下到上（垂直方向上）
.box{ -webkit-box-pack: end; -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
5. 是否允許子元素伸縮
.item{ -webkit-box-flex: 1.0; -moz-flex-grow: 1; -webkit-flex-grow: 1; flex-grow: 1; }
box語法中 box-flex 如果不是0就表示該子元素允許伸縮，而flex是分開的，上面 flex-grow 是允許放大（默認不允許）
.item{ -webkit-box-flex: 1.0; -moz-flex-shrink: 1; -webkit-flex-shrink: 1; flex-shrink: 1; }
flex-shrink 是允許縮小（默認允許）。box-flex 默認值為0，也就是說，在默認的情況下，在兩個瀏覽器中的表現是不一樣的：
介紹如下：
.item{ box-flex: <value>; /*伸縮：<一個浮點數，默認為0.0，即表示不可伸縮，大於0的值可伸縮，柔性相對>*/ flex-grow: <number>; /* default 0 */ /*放大：默認0（即如果有剩余空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）*/ flex-shrink: <number>; /* default 1 */ /*縮小：默認1（如果空間不足則會縮小，值為0不縮小）*/ }
6. 子元素的顯示次序
.item{ -webkit-box-ordinal-group: 1; -moz-order: 1; -webkit-order: 1; order: 1; }
注意：目前還有一個問題沒有弄明白，舊版本中的那個屬性對應着新版本的 align-self屬性，有知道的請告知，謝謝！