H5移動端知識點總結

時間  2019-11-09
標籤 h5 移動 知識 總結 欄目 無線 简体版
原文   原文鏈接

 

閱讀目錄css

移動開發基本知識點html

一. 使用rem做爲單位android

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 便可;ios

二.  禁用a,button,input,optgroup,select,textarea 等標籤背景變暗css3

在移動端使用a標籤作按鈕的時候或者文字鏈接的時候，點擊按鈕會出現一個 "暗色的"背景，好比以下代碼：
  <a href="">button1</a>
  <input type="button" value="提交"/>
在移動端點擊後 會出現"暗色"的背景，這時候咱們須要在css加入以下代碼便可：web

a,button,input,optgroup,select,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

三. meta基礎知識點：chrome

   1.頁面窗口自動調整到設備寬度，並禁止用戶及縮放頁面。express

<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>

二、填寫抄送地址;
在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>

五、包含主題，用?subject=能夠填上主題。以下代碼：
<p><a href="mailto:tugenhua@126.com?subject=【邀請函】">包含主題，能夠填上主題</a></p>

六、包含內容，用?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;
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程