移動開發基本知識點
一.使用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標簽做按鈕的時候或者文字連接的時候，點擊按鈕會出現一個"暗色的"背景，比如如下代碼：
在移動端點擊后會出現"暗色"的背景，這時候我們需要在css加入如下代碼即可：
a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
三. meta基礎知識點：
1.頁面窗口自動調整到設備寬度，并禁止用戶及縮放頁面。
屬性基本含義：
content="width=device-width：
控制viewport的大小,device-width為設備的寬度
initial-scale -初始的縮放比例
minimum-scale -允許用戶縮放到的最小比例
maximum-scale -允許用戶縮放到的最大比例
user-scalable -用戶是否可以手動縮放
2.忽略將頁面中的數字識別為電話號碼
3.忽略Android平臺中對郵箱地址的識別
4.當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari
5.將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式
6.需要在網站的根目錄下存放favicon圖標，防止404請求(使用fiddler可以監聽到)，在頁面上需加link如下：
因此頁面上通用的模板如下：
標題
這里開始內容
四：移動端如何定義字體font-family
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}
五：在android或者IOS下 撥打電話代碼如下：
六：發短信(winphone系統無效)
七：調用手機系統自帶的郵件功能
1.當瀏覽者點擊這個鏈接時，瀏覽器會自動調用默認的客戶端電子郵件程序，并在收件人框中自動填上收件人的地址下面
2、填寫抄送地址;
在IOS手機下：在收件人地址后用?cc=開頭;
如下代碼：
在android手機下，如下代碼：
3.填上密件抄送地址，如下代碼：
在IOS手機下：緊跟著抄送地址之后，寫上&bcc=，填上密件抄送地址
在安卓下;如下代碼：
4.包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現。如下代碼：
包含多個收件人、抄送、密件抄送人，用分號隔(;)開多個收件人的地址即可實現
5、包含主題，用?subject=可以填上主題。如下代碼：
6、包含內容，用?body=可以填上內容(需要換行的話，使用%0A給文本換行)；代碼如下：
7.內容包含鏈接，含http(s)://等的文本自動轉化為鏈接。如下代碼：
八：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+
如下測試代碼：
我是測試calc
.calc{
margin-left:50px;
padding-left:2rem;
width:calc(100%-50px-2rem);
height:10rem;
}
回到頂部
box-sizing的理解及使用
該屬性是解決盒模型在不同的瀏覽器中表現不一致的問題。它有三個屬性值分別是：
content-box:默認值(標準盒模型); width和height只包括內容的寬和高，不包括邊框，內邊距;
比如如下div元素：
box
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的怪異模式使用的盒模型，比如還是上面的代碼：
box
;
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屬性主要讓子容器針對父容器的寬度按一定的規則進行劃分。 代碼如下：
Hello
W3School
.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;
}
如下圖所示：
注意：
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代碼：
Hello
W3School
css代碼如下：
.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;
}
如下圖所示：
二：vertical可以讓子元素進行垂直排列;
css代碼如下：
*{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;
}
如下圖所示：
三：inherit。Inherit屬性讓子元素繼承父元素的相關屬性。效果和第一種效果一樣，都是水平對齊;
2. box-direction
還是如下html代碼：
Hello
W3School
box-direction用來確定父容器里的子容器的排列順序，具體的屬性如下代碼所示：
normal | reverse | inherit
normal是默認值，按照HTML文檔里的結構的先后順序依次展示， 如果box-direction設置為normal，則結構順序還是id為p1元素，id為p2元素。
reverse:表示反轉。如果設置reverse反轉，則結構排列順序為id為p2元素，id為p1元素。如下代碼：
css代碼如下：
*{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;
}
如下圖所示：
3. box-align:
box-align表示容器里面字容器的垂直對齊方式，可選參數如下表示：
start | end | center | baseline | stretch
1.對齊方式start：表示居頂對齊
代碼如下：
*{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;
}
如上P1高度為160px p2為100px;對齊方式如下圖所示：
如果改為end的話，那么就是 居低對齊了，如下：
center表示居中對齊，如下：
stretch在box-align表示拉伸，拉伸與其父容器等高。如下代碼：
在firefox下 和父容器下等高，滿足條件，如下：
在chrome下不滿足條件；如下：
4. box-pack
box-pack表示父容器里面子容器的水平對齊方式，可選參數如下表示：
start | end | center | justify
box-pack:start;表示水平居左對齊，對于正常方向的框，首個子元素的左邊緣被放在左側（最后的子元素后是所有剩余的空間）
對于相反方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）代碼如下所示：
*{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;
}
如下圖所示：
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代碼都是該結構)：
css代碼如下：
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;
}
注意：在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: ;}
2. flex-grow屬性
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大
基本語法：
.xx {
flex-grow: ;
}
3. flex-shrink屬性
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
基本語法：
.xx {
flex-shrink: ;
}
4. flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
基本語法：
.xx { flex-basis: | 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元素（代表骰子的一個面）是Flex容器，span元素（代表一個點）是Flex項目。如果有多個項目，就要添加多個span元素，以此類推。css代碼結構如下：
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;
}
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代碼：
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代碼：
CSS代碼如下：
.column{
display: flex;
justify-content: space-between;
}
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
如下圖所示：
五：5丙
HTML結構如下：
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結構如下：
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;
-webkit-box-align: center;
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;
-webkit-box-direction: reverse;
box-direction: reverse;
}
box-direction屬性總共有3個值：
.box{
box-direction: normal | reverse | inherit;
}
4.box-orient屬性
box-orient定義子元素是否應水平或垂直排列。
.box{
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
}
box-orient屬性總共有5個值：
.box{
box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
}
horizontal:在水平行中從左向右排列子元素。
vertical:從上向下垂直排列子元素。
inline-axis： 沿著行內軸來排列子元素（映射為horizontal）。
block-axis： 沿著塊軸來排列子元素（映射為vertical）。
inherit： 應該從父元素繼承box-orient屬性的值。
5.box-lines屬性
box-lines定義當子元素超出了容器是否允許子元素換行。
.box{
-moz-box-lines: multiple;
-webkit-box-lines: multiple;
box-lines: multiple;
}
box-lines屬性總共有2個值：
.box{
box-lines: single | multiple;
}
single：伸縮盒對象的子元素只在一行內顯示multiple：伸縮盒對象的子元素超出父元素的空間時換行顯示
6.box-flex屬性。
box-flex定義是否允許當前子元素伸縮。
.item{
-moz-box-flex: 1.0;
-webkit-box-flex: 1.0;
box-flex: 1.0;
}
box-flex屬性使用一個浮點值：
.item{
box-flex: ;
}
7.box-ordinal-group屬性
box-ordinal-group定義子元素的顯示次序，數值越小越排前。
.item{
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}
box-direction屬性使用一個整數值：
.item{
box-ordinal-group: ;
}
新版語法如下：
定義容器的display屬性：
.box{
display: -webkit-flex;
display: flex;
}
.box{
display: -webkit-inline-flex;
display:inline-flex;
}
容器樣式
.box{
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: ??;
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容器是單行或者多行。
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: ;
flex-grow: ;
flex-shrink: ;
flex-basis: | auto;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
兼容寫法
1.首先是定義容器的display屬性：
.box{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
這里還要注意的是，如果子元素是行內元素，在很多情況下都要使用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: ;
flex-grow: ;
flex-shrink: ;
}
6.子元素的顯示次序
.item{
-webkit-box-ordinal-group: 1;
-moz-order: 1;
-webkit-order: 1;
order: 1;
}
更多學習分享加群 ? ? ?105601600
更多學習
