H5移動(dòng)端知識(shí)點(diǎn)總結(jié)
閱讀目錄
移動(dòng)開發(fā)基本知識(shí)點(diǎn)
calc基本用法
box-sizing的理解及使用
理解display:box的布局
理解flex布局
Flex布局兼容知識(shí)點(diǎn)總結(jié)
回到頂部
移動(dòng)開發(fā)基本知識(shí)點(diǎn)
一. 使用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; } }
給手機(jī)設(shè)置100px的字體大小; 對(duì)于320px的手機(jī)匹配是100px浴鸿，其他手機(jī)都是等比例匹配; 因此設(shè)計(jì)稿上是多少像素的話，那么轉(zhuǎn)換為rem的時(shí)候，rem = 設(shè)計(jì)稿的像素/100 即可;
二.??禁用a,button,input,optgroup,select,textarea 等標(biāo)簽背景變暗
在移動(dòng)端使用a標(biāo)簽做按鈕的時(shí)候或者文字連接的時(shí)候严肪，點(diǎn)擊按鈕會(huì)出現(xiàn)一個(gè) "暗色的"背景供鸠，比如如下代碼：
在移動(dòng)端點(diǎn)擊后 會(huì)出現(xiàn)"暗色"的背景撼玄，這時(shí)候我們需要在css加入如下代碼即可：
a,button,input,optgroup,select,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
三. meta基礎(chǔ)知識(shí)點(diǎn)：
1.頁面窗口自動(dòng)調(diào)整到設(shè)備寬度缔杉，并禁止用戶及縮放頁面扑馁。
屬性基本含義：
content="width=device-width：
控制 viewport 的大小,device-width 為設(shè)備的寬度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動(dòng)縮放
2.忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼
3. 忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別
4. 當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式鳍征，可隱藏地址欄黍翎，僅針對(duì)ios的safari
5. 將網(wǎng)站添加到主屏幕快速啟動(dòng)方式，僅針對(duì)ios的safari頂端狀態(tài)條的樣式
6. 需要在網(wǎng)站的根目錄下存放favicon圖標(biāo)蟆技，防止404請(qǐng)求(使用fiddler可以監(jiān)聽到)玩敏，在頁面上需加link如下：
因此頁面上通用的模板如下：
標(biāo)題
這里開始內(nèi)容
四：移動(dòng)端如何定義字體font-family
body{font-family: "Helvetica Neue", Helvetica, sans-serif;}
五：在android或者IOS下 撥打電話代碼如下：
六：發(fā)短信(winphone系統(tǒng)無效)
七：調(diào)用手機(jī)系統(tǒng)自帶的郵件功能
1. 當(dāng)瀏覽者點(diǎn)擊這個(gè)鏈接時(shí)，瀏覽器會(huì)自動(dòng)調(diào)用默認(rèn)的客戶端電子郵件程序质礼，并在收件人框中自動(dòng)填上收件人的地址下面
2旺聚、填寫抄送地址;
在IOS手機(jī)下：在收件人地址后用?cc=開頭;
如下代碼：
在android手機(jī)下，如下代碼：
3. 填上密件抄送地址眶蕉，如下代碼：
在IOS手機(jī)下：緊跟著抄送地址之后砰粹，寫上&bcc=，填上密件抄送地址
在安卓下;如下代碼：
4. 包含多個(gè)收件人造挽、抄送碱璃、密件抄送人，用分號(hào)隔(;)開多個(gè)收件人的地址即可實(shí)現(xiàn)饭入。如下代碼：
包含多個(gè)收件人嵌器、抄送、密件抄送人谐丢，用分號(hào)隔(;)開多個(gè)收件人的地址即可實(shí)現(xiàn)
5爽航、包含主題蚓让，用?subject=可以填上主題。如下代碼：
6历极、包含內(nèi)容，用?body=可以填上內(nèi)容(需要換行的話衷佃，使用%0A給文本換行)趟卸；代碼如下：
7. 內(nèi)容包含鏈接氏义，含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接锄列。如下代碼：
內(nèi)容包含鏈接次坡，含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接
八：webkit表單輸入框placeholder的顏色值改變：
如果想要默認(rèn)的顏色顯示紅色忧陪，代碼如下：
input::-webkit-input-placeholder{color:red;}
如果想要用戶點(diǎn)擊變?yōu)樗{(lán)色灶挟，代碼如下：
input:focus::-webkit-input-placeholder{color:blue;}
九：移動(dòng)端IOS手機(jī)下清除輸入框內(nèi)陰影家妆，代碼如下
input,textarea {
-webkit-appearance: none;
}
十：在IOS中 禁止長(zhǎng)按鏈接與圖片彈出菜單
a, img {
-webkit-touch-callout: none;
}
回到頂部
calc基本用法
calc基本語法：
.class {width: calc(expression);}
它可以支持加桦卒，減洗鸵，乘军援，除; 在我們做手機(jī)端的時(shí)候非常有用的一個(gè)知識(shí)點(diǎn);
優(yōu)點(diǎn)如下：
1. 支持使用 "+","-","*" 和 "/" 四則運(yùn)算宠进。
2. 可以混合使用百分比(%),px,em,rem等作為單位可進(jìn)行計(jì)算鸠补。
瀏覽器的兼容性有如下：
IE9+萝风，F(xiàn)F4.0+，Chrome19+紫岩，Safari6+
如下測(cè)試代碼：
我是測(cè)試calc
.calc{
margin-left:50px;
padding-left:2rem;
width:calc(100%-50px-2rem);
height:10rem;
}
回到頂部
box-sizing的理解及使用
該屬性是解決盒模型在不同的瀏覽器中表現(xiàn)不一致的問題规惰。它有三個(gè)屬性值分別是：
content-box: 默認(rèn)值(標(biāo)準(zhǔn)盒模型); width和height只包括內(nèi)容的寬和高，不包括邊框泉蝌，內(nèi)邊距;
比如如下div元素：
box
css如下：.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:content-box;}
那么在瀏覽器下渲染的實(shí)際寬度和高度分別是：222px,222px; 因?yàn)樵跇?biāo)準(zhǔn)的盒模型下歇万，在瀏覽器中渲染的實(shí)際寬度和高度包括
內(nèi)邊距(padding)和邊框的(border);如下圖所示：
border-box: width與height是包括內(nèi)邊距和邊框的，不包括外邊距勋陪，這是IE的怪異模式使用的盒模型贪磺，比如還是上面的代碼：
box
;
css代碼如下：
.box {width:200px;height:200px;padding:10px;border:1px solid #333;margin:10px;box-sizing:border-box;}
那么此時(shí)瀏覽器渲染的width會(huì)是178px，height也是178px; 因?yàn)榇藭r(shí)定義的width和height會(huì)包含padding和border在內(nèi);
使用這個(gè)屬性對(duì)于在使用百分比的情況下布局頁面非常有用诅愚，比如有兩列布局寬度都是50%;但是呢還有padding和border寒锚，那么這個(gè)
時(shí)候如果我們不使用該屬性的話(當(dāng)然我們也可以使用calc方法來計(jì)算); 那么總寬度會(huì)大于頁面中的100%;因此這時(shí)候可以使用這
個(gè)屬性來使頁面達(dá)到100%的布局.如下圖所示：
瀏覽器支持的程度如下：
回到頂部
理解display:box的布局
display: box; box-flex 是css3新添加的盒子模型屬性，它可以為我們解決按比列劃分违孝，水平均分刹前，及垂直等高等。
一：按比例劃分：
目前box-flex 屬性還沒有得到firefox, Opera, chrome瀏覽器的完全支持雌桑，但我們可以使用它們的私有屬性定義firefox(-moz-)喇喉，opera(-o-)，chrome/safari（-webkit-）校坑。box-flex屬性主要讓子容器針對(duì)父容器的寬度按一定的規(guī)則進(jìn)行劃分轧飞。 代碼如下：
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, 其子元素才可以進(jìn)行劃分衅鹿。如上給id為p1設(shè)置box-flex設(shè)置為1撒踪，給id為p2設(shè)置box-flex為2过咬，
說明分別給其設(shè)置1等分和2等分，也就是說給id為p1元素設(shè)置寬度為 300 * 1/3 = 100px; 給id為p2元素設(shè)置寬度為 300 * 2/3 = 200px;
2. 如果進(jìn)行父容器劃分的同時(shí)制妄，他的子元素有的設(shè)置了寬度掸绞，有的要進(jìn)行劃分的話，那么劃分的寬度 = 父容器的寬度 – 已經(jīng)設(shè)置的寬度 耕捞。
再進(jìn)行對(duì)應(yīng)的劃分衔掸。
如下圖所示：
二：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設(shè)置 horizontal 或 inline-axis 屬性效果表現(xiàn)一致敞映。都可以將子元素進(jìn)行水平排列.
如下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 可以讓子元素進(jìn)行垂直排列;
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屬性讓子元素繼承父元素的相關(guān)屬性磷斧。效果和第一種效果一樣振愿，都是水平對(duì)齊;
2. box-direction
還是如下html代碼：
Hello
W3School
box-direction 用來確定父容器里的子容器的排列順序，具體的屬性如下代碼所示：
normal | reverse | inherit
normal是默認(rèn)值弛饭，按照HTML文檔里的結(jié)構(gòu)的先后順序依次展示冕末， 如果box-direction 設(shè)置為 normal，則結(jié)構(gòu)順序還是 id為p1元素侣颂，id為p2元素档桃。
reverse: 表示反轉(zhuǎn)。如果設(shè)置reverse反轉(zhuǎn)憔晒，則結(jié)構(gòu)排列順序?yàn)?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 表示容器里面字容器的垂直對(duì)齊方式拒担，可選參數(shù)如下表示：
start | end | center | baseline | stretch
1. 對(duì)齊方式 start：表示居頂對(duì)齊
代碼如下：
*{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; 對(duì)齊方式如下圖所示：
如果改為end的話嘹屯，那么就是 居低對(duì)齊了，如下：
center表示居中對(duì)齊澎蛛，如下：
stretch 在box-align表示拉伸抚垄，拉伸與其父容器等高。如下代碼：
在firefox下 和父容器下等高谋逻，滿足條件呆馁，如下：
在chrome下不滿足條件；如下：
4. box-pack
box-pack表示父容器里面子容器的水平對(duì)齊方式毁兆，可選參數(shù)如下表示：
start | end | center | justify
box-pack:start; 表示水平居左對(duì)齊浙滤，對(duì)于正常方向的框，首個(gè)子元素的左邊緣被放在左側(cè)（最后的子元素后是所有剩余的空間）
對(duì)于相反方向的框气堕，最后子元素的右邊緣被放在右側(cè)（首個(gè)子元素前是所有剩余的空間）代碼如下所示：
*{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;表示水平居中對(duì)齊,均等地分割多余空間纺腊，其中一半空間被置于首個(gè)子元素前畔咧，另一半被置于最后一個(gè)子元素后; 如下圖所示：
box-pack:end;表示水平居右對(duì)齊;對(duì)于正常方向的框，最后子元素的右邊緣被放在右側(cè)（首個(gè)子元素前是所有剩余的空間）揖膜。
對(duì)于相反方向的框誓沸，首個(gè)子元素的左邊緣被放在左側(cè)（最后子元素后是所有剩余的空間）。如下圖所示：
box-pack:Justify：
在box-pack表示水平等分父容器寬度（在每個(gè)子元素之間分割多余的空間（首個(gè)子元素前和最后一個(gè)子元素后沒有多余的空間））
如下：
回到頂部
理解flex布局
我們傳統(tǒng)的布局方式是基于在盒子模型下的壹粟，依賴于display屬性的拜隧，position屬性的或者是float屬性的，但是在傳統(tǒng)的布局上面并不好布局; 比如我們想讓某個(gè)元素垂直居中的話趁仙，我們常見的會(huì)讓其元素表現(xiàn)為表格形式洪添，比如display:table-cell屬性什么的，我們現(xiàn)在來學(xué)習(xí)下使用flex布局是非常方便的;
目前的瀏覽器支持程度：IE10+雀费，chrome21+干奢，opera12.1+，F(xiàn)irefox22+盏袄，safari6.1+等;
如上瀏覽器的支持程度忿峻，我們可以把此元素使用在移動(dòng)端很方便;
flex是什么呢？Flex是Flexible Box的縮寫貌矿，意為"彈性布局"炭菌，用來為盒狀模型提供最大的靈活性。
flex的彈性布局有如下優(yōu)勢(shì)：
1.獨(dú)立的高度控制與對(duì)齊逛漫。
2.獨(dú)立的元素順序黑低。
3.指定元素之間的關(guān)系。
4.靈活的尺寸與對(duì)齊方式酌毡。
一：基本概念：
采用flex布局的元素克握，稱為flex容器，它的所有子元素自動(dòng)成為容器成員枷踏，稱為flex項(xiàng)目菩暗。如下圖：
容器默認(rèn)存在2根軸，水平的主軸和垂直的側(cè)軸旭蠕，主軸的開始位置(與邊框的交叉點(diǎn))叫做main start, 結(jié)束位置叫做 main end.
交叉軸的開始位置叫做 cross start停团，結(jié)束位置叫做cross end。項(xiàng)目默認(rèn)沿主軸排列掏熬。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size佑稠，
占據(jù)的交叉軸空間叫做cross size。
二：容器有如下6個(gè)屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
我們分別來看下上面6個(gè)屬性有哪些值旗芬，分別代表什么意思舌胶。
1. flex-direction：該屬性決定主軸的方向(即項(xiàng)目的排列方向)。
它可能有四個(gè)值：
row（默認(rèn)值）：主軸為水平方向疮丛，起點(diǎn)在左端幔嫂。
row-reverse：主軸為水平方向辆它，起點(diǎn)在右端。
column：主軸為垂直方向履恩，起點(diǎn)在上沿锰茉。
column-reverse：主軸為垂直方向，起點(diǎn)在下沿似袁。
我們來做幾個(gè)demo洞辣，來分別理解下上面幾個(gè)值的含義;我這邊只講解上面第一個(gè)和第二個(gè)值的含義，下面的也是一樣昙衅，
就不講解了; 比如頁面上有一個(gè)容器，里面有一個(gè)元素定鸟，看下這個(gè)元素的排列方向而涉。
HTML代碼：(如沒有特別的說明，下面的html代碼都是該結(jié)構(gòu))：
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平臺(tái)的uc瀏覽器和微信瀏覽器中使用display: flex;會(huì)出問題联予。不支持該屬性啼县，因此使用display: flex;的時(shí)候需要加上display: -webkit-box; 還有一些水平對(duì)齊或者垂直對(duì)齊都需要加上對(duì)應(yīng)的box-pack(box-pack表示父容器里面子容器的水平對(duì)齊方式)及box-align(box-align 表示容器里面子容器的垂直對(duì)齊方式）.具體的可以看如下介紹的 display:box屬性那一節(jié)。
我們可以看下截圖如下：
當(dāng)我們把flex-direction的值改為 row-reverse后(主軸為水平方向沸久，起點(diǎn)在右端)季眷，我們截圖如下所示：
2. flex-wrap屬性 默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上卷胯。flex-wrap屬性定義子刮，如果一條軸線排不下，可以換行窑睁。
它有如下三個(gè)值：
nowrap（默認(rèn)）：不換行挺峡。
wrap：換行，第一行在上方担钮。
wrap-reverse：換行橱赠，第一行在下方。
3. flex-flow
該屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式箫津，默認(rèn)值為row nowrap
4. justify-content屬性
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式狭姨。下面假設(shè)主軸為從左到右。
值為如下：
flex-start | flex-end | center | space-between | space-around;
flex-start(默認(rèn)值) 左對(duì)齊
flex-end 右對(duì)齊
center 居中
space-between： 兩端對(duì)齊苏遥，項(xiàng)目之間的間隔都相等
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等饼拍。
5. align-items屬性
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
它可能取5個(gè)值：
flex-start：交叉軸的起點(diǎn)對(duì)齊暖眼。
flex-end：交叉軸的終點(diǎn)對(duì)齊惕耕。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊诫肠。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto司澎，將占滿整個(gè)容器的高度欺缘。
6. align-content屬性
align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線挤安，該屬性不起作用谚殊。
該屬性可能取6個(gè)值。
flex-start：與交叉軸的起點(diǎn)對(duì)齊蛤铜。
flex-end：與交叉軸的終點(diǎn)對(duì)齊嫩絮。
center：與交叉軸的中點(diǎn)對(duì)齊。
space-between：與交叉軸兩端對(duì)齊围肥，軸線之間的間隔平均分布剿干。
space-around：每根軸線兩側(cè)的間隔都相等。所以穆刻，軸線之間的間隔比軸線與邊框的間隔大一倍置尔。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
三：項(xiàng)目的屬性氢伟，以下有6個(gè)屬性可以設(shè)置在項(xiàng)目中榜轿，
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order屬性
order屬性定義項(xiàng)目的排列順序。數(shù)值越小朵锣，排列越靠前谬盐，默認(rèn)為0。
基本語法：
.xx {order: ;}
2. flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例诚些，默認(rèn)為0飞傀，即如果存在剩余空間，也不放大
基本語法：
.xx {
flex-grow: ;
}
3. flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例泣刹，默認(rèn)為1助析，即如果空間不足，該項(xiàng)目將縮小椅您。
基本語法：
.xx {
flex-shrink: ;
}
4. flex-basis屬性
flex-basis屬性定義了在分配多余空間之前外冀，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性掀泳，計(jì)算主軸是否有多余空間雪隧。它的默認(rèn)值為auto，即項(xiàng)目的本來大小员舵。
基本語法：
.xx { flex-basis: | auto; }
它可以設(shè)為跟width或height屬性一樣的值（比如350px）脑沿，則項(xiàng)目將占據(jù)固定空間。
5. flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫马僻，默認(rèn)值為0 1 auto庄拇。后兩個(gè)屬性可選。
6. align-self屬性
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性措近。
默認(rèn)值為auto溶弟，表示繼承父元素的align-items屬性，如果沒有父元素瞭郑，則等同于stretch辜御。
基本語法：
.xx {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
上面是基本語法，感覺好模糊啊屈张，看到這么多介紹擒权，感覺很迷茫啊，下面我們趁熱打鐵來實(shí)現(xiàn)下demo阁谆。
我們很多人會(huì)不會(huì)打麻將呢碳抄？打麻將中有1-9丙對(duì)吧，我們來分別來實(shí)現(xiàn)他們的布局;
首先我們的HTML代碼還是如下(如果沒有特別的說明都是這樣的結(jié)構(gòu))：
一： 1丙
HTML代碼：
上面代碼中笛厦，div元素（代表骰子的一個(gè)面）是Flex容器纳鼎，span元素（代表一個(gè)點(diǎn)）是Flex項(xiàng)目。如果有多個(gè)項(xiàng)目裳凸，就要添加多個(gè)span元素，以此類推劝贸。css代碼結(jié)構(gòu)如下：
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. 首先姨谷，只有一個(gè)左上角的情況下，flex布局默認(rèn)為左對(duì)齊映九，因此需要display:flex即可;如下代碼：
.first-face {
display: flex;
display: -webkit-box;
}
上面為了兼容UC瀏覽器和IOS瀏覽器下梦湘，因此需要加上display: -webkit-box;來兼容，我們也明白件甥，如果不加上.first-face里面的代碼捌议，也能做出效果，因?yàn)樵啬J(rèn)都是向左對(duì)齊的引有，如下圖所示：
我們繼續(xù)來看看對(duì)元素進(jìn)行居中對(duì)齊; 需要加上 justify-content: center;即可;但是在UC瀏覽器下不支持該屬性瓣颅，
我們水平對(duì)齊需要加上box-pack，box-pack表示父容器里面子容器的水平對(duì)齊方式譬正，具體的值如上面介紹的box的語法宫补，
需要加上 -webkit-box-pack:center; 因此在first-face里面的css代碼變?yōu)槿缦麓a：
.first-face {
display: flex;
display: -webkit-box;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
上面已經(jīng)介紹過justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式(水平方向上)，有五個(gè)值曾我，這里不再介紹粉怕，具體可以看上面的基本語法。
水平右對(duì)齊代碼也一樣抒巢、因此代碼變成如下：
.first-face {
display: flex;
display: -webkit-box;
justify-content:flex-end;
-webkit-box-pack:end;
}
如下圖所示：
2. 我們接著來分別看看垂直居左對(duì)齊贫贝，垂直居中對(duì)齊，垂直居右對(duì)齊.
一：垂直居左對(duì)齊
我們現(xiàn)在需要使用上align-items屬性了蛉谜，該屬性定義項(xiàng)目在交叉軸上如何對(duì)齊稚晚。具體的語法如上：
同樣為了兼容UC瀏覽器或其他不支持的瀏覽器崇堵，我們需要加上box-align 該屬性表示容器里面字容器的垂直對(duì)齊方式;具體的語法如上;
因此代碼變成如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
}
效果如下：
二：垂直居中對(duì)齊
現(xiàn)在垂直已經(jīng)居中對(duì)齊了，但是在水平上還未居中對(duì)齊蜈彼，因此在水平上居中對(duì)齊筑辨，我們需要加上justify-content屬性居中即可;
同樣為了兼容UC瀏覽器，需要加上 -webkit-box-pack:center;
代碼變?yōu)槿缦拢?/p>
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
三：垂直居右對(duì)齊
原理和上面的垂直居中對(duì)齊是一個(gè)道理幸逆，只是值換了下而已;代碼如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:center;
-webkit-box-align:center;
justify-content:flex-end;
-webkit-box-pack:end;
}
效果如下：
3. 我們接著來分別看看底部居左對(duì)齊棍辕，底部居中對(duì)齊，底部居右對(duì)齊.
一：底部居左對(duì)齊
其實(shí)屬性還是用到上面的还绘，只是值換了一下而已;代碼如下：
.first-face {
display: flex;
display: -webkit-box;
align-items:flex-end;
-webkit-box-align:end;
justify-content:flex-start;
-webkit-box-pack:start;
}
效果如下：
二：底部居中對(duì)齊
代碼變?yōu)槿缦拢?/p>
.first-face {
display: flex;
display: -webkit-box;
align-items:flex-end;
-webkit-box-align:end;
justify-content:center;
-webkit-box-pack:center;
}
效果如下：
三：底部居右對(duì)齊
代碼變?yōu)槿缦拢?/p>
.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端對(duì)齊;需要使用的屬性justify-content: space-between;該屬性能使第一個(gè)元素在左邊楚昭，最后一個(gè)元素在右邊。
因此代碼變成如下：
.first-face {
display: flex;
justify-content: space-between;
}
但是在UC瀏覽器下不生效拍顷，因此我們需要 display: -webkit-box;和-webkit-box-pack:Justify;這兩句代碼;
display: -webkit-box;我不多介紹抚太，上面已經(jīng)講了，-webkit-box-pack:Justify;的含義是在box-pack表示水平等分父容器寬度昔案。
因此為了兼容UC瀏覽器尿贫，所以代碼變成如下：
.first-face {
display: flex;
justify-content: space-between;
display: -webkit-box;
-webkit-box-pack:Justify;
}
效果如下：
2. 垂直兩端對(duì)齊;
垂直對(duì)齊需要使用到的flex-direction屬性，該屬性有一個(gè)值為column：主軸為垂直方向踏揣，起點(diǎn)在上沿庆亡。
代碼變?yōu)槿缦拢?/p>
.first-face {
display: flex;
justify-content: space-between;
flex-direction: column;
}
再加上justify-content: space-between;說明兩端對(duì)齊.但是在UC瀏覽器并不支持該屬性，使其不能垂直兩端對(duì)齊捞稿，因此為了兼容UC瀏覽器又谋，需要使用-webkit-box;因此整個(gè)代碼變成如下：
.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; 使其對(duì)齊方向?yàn)樗綇淖蠖碎_始，-webkit-box-orient: vertical;使用這句代碼告訴
瀏覽器是垂直的,-webkit-box-pack:justify;這句代碼告訴瀏覽器垂直的兩端對(duì)齊娱局。
如下圖所示：
3 . 垂直居中兩端對(duì)齊
代碼如下：
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
多加一句 align-items: center;代碼; 表示交叉軸上居中對(duì)齊彰亥。同理在UC瀏覽器下不支持的，因此我們?yōu)榱思嫒軺C瀏覽器衰齐，可以加上如下代碼任斋，因此整個(gè)代碼如下：
.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. 垂直居右兩端對(duì)齊
代碼如下：
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
同理為了兼容UC瀏覽器仁卷，整個(gè)代碼變成如下：
.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;
}
和上面代碼一樣，只是更改了一下垂直對(duì)齊方式而已;如下圖所示：
注意：下面由于時(shí)間的關(guān)系犬第，先不考慮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結(jié)構(gòu)如下：
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結(jié)構(gòu)如下：
css代碼如下：
.column{
display: flex;
justify-content: space-between;
}
.first-face {
display: flex;
flex-direction: column;
justify-content: space-between;
}
如下圖所示：
7,8,9丙也是一個(gè)意思锦积，這里先不做了;
回到頂部
Flex布局兼容知識(shí)點(diǎn)總結(jié)
假設(shè)父容器class為 box,子項(xiàng)目為item.
舊版語法如下：
一：定義容器的display屬性。
舊語法如下寫法：
.box {
display: -moz-box;
display: -webkit-box;
display: box;
}
新版語法需要如下寫：
.box{
display: -webkit-flex;
display: flex;
}
或者 行內(nèi)
.box{
display: -webkit-inline-flex;
display:inline-flex;
}
二：容器屬性(舊版語法)
1. box-pack 屬性;(水平方向上對(duì)齊方式)
box-pack定義子元素主軸對(duì)齊方式歉嗓。
.box{
-moz-box-pack: center;
-webkit-box-pack: center;
box-pack: center;
}
box-pack屬性總共有4個(gè)值：
.box{
box-pack: start | end | center | justify;
}
各個(gè)值的含義如下：
start:
對(duì)于正常方向的框丰介，首個(gè)子元素的左邊緣被放在左側(cè)（最后的子元素后是所有剩余的空間)
對(duì)于相反方向的框，最后子元素的右邊緣被放在右側(cè)（首個(gè)子元素前是所有剩余的空間）
end:
對(duì)于正常方向的框，最后子元素的右邊緣被放在右側(cè)（首個(gè)子元素前是所有剩余的空間）哮幢。
對(duì)于相反方向的框带膀，首個(gè)子元素的左邊緣被放在左側(cè)（最后子元素后是所有剩余的空間）。
center:
均等地分割多余空間橙垢，其中一半空間被置于首個(gè)子元素前垛叨，另一半被置于最后一個(gè)子元素后.
justify:
在每個(gè)子元素之間分割多余的空間（首個(gè)子元素前和最后一個(gè)子元素后沒有多余的空間）。
2.box-align 屬性(垂直方向上的對(duì)齊方式)
box-align定義子元素交叉軸對(duì)齊方式柜某。
.box{
-moz-box-align: center;
-webkit-box-align: center;
box-align: center;
}
box-align屬性總共有5個(gè)值：
.box{
box-align: start | end | center | baseline | stretch;
}
各個(gè)值的含義如下：
start:
對(duì)于正常方向的框嗽元，每個(gè)子元素的上邊緣沿著框的頂邊放置。
對(duì)于反方向的框喂击，每個(gè)子元素的下邊緣沿著框的底邊放置剂癌。
end:
對(duì)于正常方向的框，每個(gè)子元素的下邊緣沿著框的底邊放置翰绊。
對(duì)于反方向的框佩谷，每個(gè)子元素的上邊緣沿著框的頂邊放置。
center:
均等地分割多余的空間监嗜，一半位于子元素之上谐檀，另一半位于子元素之下。
baseline:
如果 box-orient 是inline-axis或horizontal裁奇，所有子元素均與其基線對(duì)齊稚补。
stretch:
拉伸子元素以填充包含塊
3.box-direction 屬性
box-direction定義子元素的顯示方向。
.box{
-moz-box-direction: reverse;
-webkit-box-direction: reverse;
box-direction: reverse;
}
box-direction屬性總共有3個(gè)值：
.box{
box-direction: normal | reverse | inherit;
}
4.box-orient 屬性
box-orient定義子元素是否應(yīng)水平或垂直排列框喳。
.box{
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
}
box-orient屬性總共有5個(gè)值：
.box{
box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
}
horizontal: 在水平行中從左向右排列子元素。
vertical: 從上向下垂直排列子元素厦坛。
inline-axis： 沿著行內(nèi)軸來排列子元素（映射為 horizontal）五垮。
block-axis： 沿著塊軸來排列子元素（映射為 vertical）。
inherit： 應(yīng)該從父元素繼承 box-orient 屬性的值杜秸。
5.box-lines 屬性
box-lines定義當(dāng)子元素超出了容器是否允許子元素?fù)Q行放仗。
.box{
-moz-box-lines: multiple;
-webkit-box-lines: multiple;
box-lines: multiple;
}
box-lines屬性總共有2個(gè)值：
.box{
box-lines: single | multiple;
}
single：伸縮盒對(duì)象的子元素只在一行內(nèi)顯示multiple：伸縮盒對(duì)象的子元素超出父元素的空間時(shí)換行顯示
6.box-flex 屬性。
box-flex定義是否允許當(dāng)前子元素伸縮撬碟。
.item{
-moz-box-flex: 1.0;
-webkit-box-flex: 1.0;
box-flex: 1.0;
}
box-flex屬性使用一個(gè)浮點(diǎn)值：
.item{
box-flex: ;
}
7.box-ordinal-group 屬性
box-ordinal-group定義子元素的顯示次序诞挨，數(shù)值越小越排前。
.item{
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}
box-direction屬性使用一個(gè)整數(shù)值：
.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: 默認(rèn)值呢蛤。靈活的項(xiàng)目將水平顯示惶傻，正如一個(gè)行一樣。
row-reverse: 與 row 相同其障，但是以相反的順序银室。
column: 靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣。
column-reverse: 與 column 相同蜈敢，但是以相反的順序辜荠。
flex-wrap 值介紹如下:
nowrap: flex容器為單行。該情況下flex子項(xiàng)可能會(huì)溢出容器抓狭。
wrap: flex容器為多行伯病。該情況下flex子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行否过。
wrap-reverse： 換行并第一行在下方
flex-flow值介紹如下(主軸方向和換行簡(jiǎn)寫)：
: 定義彈性盒子元素的排列方向
：控制flex容器是單行或者多行午笛。
justify-content值介紹如下：
flex-start: 彈性盒子元素將向行起始位置對(duì)齊。
flex-end: 彈性盒子元素將向行結(jié)束位置對(duì)齊叠纹。
center: 彈性盒子元素將向行中間位置對(duì)齊季研。
space-between: 第一個(gè)元素的邊界與行的主起始位置的邊界對(duì)齊，同時(shí)最后一個(gè)元素的邊界與行的主結(jié)束位置的邊距對(duì)齊誉察，
而剩余的伸縮盒項(xiàng)目則平均分布与涡，并確保兩兩之間的空白空間相等。
space-around: 伸縮盒項(xiàng)目則平均分布持偏，并確保兩兩之間的空白空間相等驼卖，同時(shí)第一個(gè)元素前的空間以及最后一個(gè)元素后的空間為其他空白空間的一半。
align-items值介紹如下:
flex-start: 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界鸿秆。
flex-end: 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界酌畜。
center: 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸卿叽，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）桥胞。
baseline: 如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效考婴。其它情況下贩虾，該值將參與基線對(duì)齊。
stretch: 如果指定側(cè)軸大小的屬性值為'auto'沥阱，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸缎罢，但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。
align-content值介紹如下:
flex-start: 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界考杉。
flex-end: 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界策精。
center: 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸崇棠，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）咽袜。
space-between: 第一行的側(cè)軸起始邊界緊靠住彈性盒容器的側(cè)軸起始內(nèi)容邊界，最后一行的側(cè)軸結(jié)束邊界緊靠住彈性盒容器的側(cè)軸結(jié)束內(nèi)容邊界易茬，
剩余的行則按一定方式在彈性盒窗口中排列酬蹋，以保持兩兩之間的空間相等及老。
space-around: 各行會(huì)按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等范抓，同時(shí)第一行前面及最后一行后面的空間是其他空間的一半骄恶。
stretch: 各行將會(huì)伸展以占用剩余的空間。如果剩余的空間是負(fù)數(shù)匕垫，該值等效于'flex-start'僧鲁。在其它情況下，剩余空間被所有行平分象泵，以擴(kuò)大它們的側(cè)軸尺寸寞秃。
子元素屬性
.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;
}
這里還要注意的是，如果子元素是行內(nèi)元素偶惠，在很多情況下都要使用 display:block 或 display:inline-block把行內(nèi)子元素變成塊元素（例如使用 box-flex 屬性）春寿，這也是舊版語法和新版語法的區(qū)別之一。
2. 子元素主軸對(duì)齊方式（水平居中對(duì)齊）
.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. 子元素交叉軸對(duì)齊方式（垂直居中對(duì)齊）
.box{
box-align: start | end | center | baseline | stretch;
align-items: flex-start | flex-end | center | baseline | stretch;
}
4. 子元素的顯示方向忽孽。
子元素的顯示方向可通過 box-direction + box-orient + flex-direction 實(shí)現(xiàn)绑改，如下代碼：
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 只是改變了子元素的排序，并沒有改變對(duì)齊方式兄一，需要新增一個(gè) box-pack 來改變對(duì)齊方式厘线。
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 是允許放大（默認(rèn)不允許）
.item{
-webkit-box-flex: 1.0;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;
}
flex-shrink 是允許縮性熳场（默認(rèn)允許）。box-flex 默認(rèn)值為0骂束，也就是說耳璧，在默認(rèn)的情況下，在兩個(gè)瀏覽器中的表現(xiàn)是不一樣的：介紹如下：
.item{
box-flex: ;
flex-grow: ;
flex-shrink: ;
}
6. 子元素的顯示次序
.item{
-webkit-box-ordinal-group: 1;
-moz-order: 1;
-webkit-order: 1;
order: 1;
}
