一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

H5移動(dòng)端知識(shí)點(diǎn)總結(jié)

 凇風(fēng) 2017-06-01

H5移動(dòng)端知識(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è) "暗色的"背景,比如如下代碼:
  <a href="">button1</a>
  <input type="button" value="提交"/>
在移動(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.頁(yè)面窗口自動(dòng)調(diào)整到設(shè)備寬度,并禁止用戶及縮放頁(yè)面。

<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 為設(shè)備的寬度
  initial-scale - 初始的縮放比例
  minimum-scale - 允許用戶縮放到的最小比例
  maximum-scale - 允許用戶縮放到的最大比例
  user-scalable - 用戶是否可以手動(dòng)縮放

2.忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼
  <meta name="format-detection" content="telephone=no" />


3. 忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別
   <meta name="format-detection" content="email=no" />


4. 當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式,可隱藏地址欄,僅針對(duì)ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />


5. 將網(wǎng)站添加到主屏幕快速啟動(dòng)方式,僅針對(duì)ios的safari頂端狀態(tài)條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


<!-- 可選default、black、black-translucent -->
6. 需要在網(wǎng)站的根目錄下存放favicon圖標(biāo),防止404請(qǐng)求(使用fiddler可以監(jiān)聽到),在頁(yè)面上需加link如下:
<link rel="shortcut icon" href="/favicon.ico">

因此頁(yè)面上通用的模板如下:

復(fù)制代碼
<!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>標(biāo)題</title>
        <link rel="shortcut icon" href="/favicon.ico">
    </head>
    <body>
        這里開始內(nèi)容
    </body>
</html>
復(fù)制代碼

四:移動(dòng)端如何定義字體font-family

body{font-family: "Helvetica Neue", Helvetica, sans-serif;}

五:在android或者IOS下 撥打電話代碼如下

<a href="tel:15602512356">打電話給:15602512356</a>

六:發(fā)短信(winphone系統(tǒng)無效)

<a href="sms:10010">發(fā)短信給: 10010</a>

七:調(diào)用手機(jī)系統(tǒng)自帶的郵件功能

1. 當(dāng)瀏覽者點(diǎn)擊這個(gè)鏈接時(shí),瀏覽器會(huì)自動(dòng)調(diào)用默認(rèn)的客戶端電子郵件程序,并在收件人框中自動(dòng)填上收件人的地址下面
<p><a href="mailto:tugenhua@126.com">發(fā)電子郵件</a></p>

2、填寫抄送地址;
在IOS手機(jī)下:在收件人地址后用?cc=開頭;
如下代碼:
<p><a href="mailto:tugenhua@126.com?cc=879083421@qq.com">填寫抄送地址</a></p>

在android手機(jī)下,如下代碼:
<p><a href="mailto:tugenhua@126.com?879083421@qq.com">填寫抄送地址</a></p>

3. 填上密件抄送地址,如下代碼:
在IOS手機(jī)下:緊跟著抄送地址之后,寫上&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. 包含多個(gè)收件人、抄送、密件抄送人,用分號(hào)隔(;)開多個(gè)收件人的地址即可實(shí)現(xiàn)。如下代碼:
<p><a href="mailto:tugenhua@126.com;879083421@qq.com;aa@qq.com">包含多個(gè)收件人、抄送、密件抄送人,用分號(hào)隔(;)開多個(gè)收件人的地址即可實(shí)現(xiàn)</a></p>

5、包含主題,用?subject=可以填上主題。如下代碼:
<p><a href="mailto:tugenhua@126.com?subject=【邀請(qǐng)函】">包含主題,可以填上主題</a></p>

6、包含內(nèi)容,用?body=可以填上內(nèi)容(需要換行的話,使用%0A給文本換行);代碼如下:
<p><a href="mailto:tugenhua@126.com?body=我來測(cè)試下">包含內(nèi)容,用?body=可以填上內(nèi)容</a></p>

7. 內(nèi)容包含鏈接,含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接。如下代碼:
<p><a href="mailto:tugenhua@126.com?body=http://www.baidu.com">內(nèi)容包含鏈接,含http(s)://等的文本自動(dòng)轉(zhuǎn)化為鏈接</a></p>

八: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基本語(yǔ)法:
.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è)試代碼:

<div class="calc">我是測(cè)試calc</div>

復(fù)制代碼
.calc{
    margin-left:50px;
    padding-left:2rem;
    width:calc(100%-50px-2rem);
    height:10rem;
}
復(fù)制代碼

box-sizing的理解及使用

該屬性是解決盒模型在不同的瀏覽器中表現(xiàn)不一致的問題。它有三個(gè)屬性值分別是:
content-box: 默認(rèn)值(標(biāo)準(zhǔn)盒模型); width和height只包括內(nèi)容的寬和高,不包括邊框,內(nèi)邊距;
比如如下div元素:<div class="box">box</div>
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的怪異模式使用的盒模型,比如還是上面的代碼:
<div class="box">box</div>;
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ì)于在使用百分比的情況下布局頁(yè)面非常有用,比如有兩列布局寬度都是50%;但是呢還有padding和border,那么這個(gè)
時(shí)候如果我們不使用該屬性的話(當(dāng)然我們也可以使用calc方法來計(jì)算); 那么總寬度會(huì)大于頁(yè)面中的100%;因此這時(shí)候可以使用這
個(gè)屬性來使頁(yè)面達(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)行劃分。 代碼如下:

復(fù)制代碼
<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>
復(fù)制代碼

如下圖所示:

注意:
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代碼:

復(fù)制代碼
<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>
復(fù)制代碼

如下圖所示:

二:vertical 可以讓子元素進(jìn)行垂直排列; 

css代碼如下:

復(fù)制代碼
<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>
復(fù)制代碼

如下圖所示:

三:inherit。 Inherit屬性讓子元素繼承父元素的相關(guān)屬性。
效果和第一種效果一樣,都是水平對(duì)齊;

2. box-direction
還是如下html代碼:

<div class="test">
     <p id="p1">Hello</p>
     <p id="p2">W3School</p>
</div>

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代碼如下:

復(fù)制代碼
<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>
復(fù)制代碼

如下圖所示:

3. box-align:

box-align 表示容器里面字容器的垂直對(duì)齊方式,可選參數(shù)如下表示:
start | end | center | baseline | stretch
1. 對(duì)齊方式 start:表示居頂對(duì)齊
代碼如下:

復(fù)制代碼
<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>
復(fù)制代碼

如上 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è)子元素前是所有剩余的空間)代碼如下所示:

復(fù)制代碼
<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>
復(fù)制代碼

如下圖所示:

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è)值的含義,下面的也是一樣,
就不講解了; 比如頁(yè)面上有一個(gè)容器,里面有一個(gè)元素,看下這個(gè)元素的排列方向。
HTML代碼:(如沒有特別的說明,下面的html代碼都是該結(jié)構(gòu)):

<div class="first-face container">
    <span class="pip"></span>
</div>

css代碼如下:

復(fù)制代碼
<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>
復(fù)制代碼

注意:在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。
基本語(yǔ)法:
.xx {order: <integer>;}
2. flex-grow屬性
flex-grow屬性定義項(xiàng)目的放大比例,默認(rèn)為0,即如果存在剩余空間,也不放大
基本語(yǔ)法:
.xx {
   flex-grow: <number>;
}
3. flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例,默認(rèn)為1,即如果空間不足,該項(xiàng)目將縮小。
基本語(yǔ)法:
.xx {
flex-shrink: <number>;
}
4. flex-basis屬性
flex-basis屬性定義了在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間(main size)。瀏覽器根據(jù)這個(gè)屬性,計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto,即項(xiàng)目的本來大小。
基本語(yǔ)法:

.xx { flex-basis: <length> | 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。

基本語(yǔ)法:
.xx {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

上面是基本語(yǔ)法,感覺好模糊啊,看到這么多介紹,感覺很迷茫啊,下面我們趁熱打鐵來實(shí)現(xiàn)下demo。
我們很多人會(huì)不會(huì)打麻將呢?打麻將中有1-9丙對(duì)吧,我們來分別來實(shí)現(xiàn)他們的布局;
首先我們的HTML代碼還是如下(如果沒有特別的說明都是這樣的結(jié)構(gòu)):

一: 1丙

HTML代碼:

<div class="first-face container">
    <span class="pip"></span>
</div>

上面代碼中,div元素(代表骰子的一個(gè)面)是Flex容器,span元素(代表一個(gè)點(diǎn))是Flex項(xiàng)目。如果有多個(gè)項(xiàng)目,就要添加多個(gè)span元素,以此類推。
css代碼結(jié)構(gòu)如下:

復(fù)制代碼
<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>
復(fù)制代碼

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的語(yǔ)法,
需要加上 -webkit-box-pack:center; 因此在first-face里面的css代碼變?yōu)槿缦麓a:

復(fù)制代碼
.first-face {
    display: flex;
    display: -webkit-box;
    justify-content:center;
    -webkit-box-pack:center;
}
復(fù)制代碼

效果如下:

上面已經(jīng)介紹過
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式(水平方向上),有五個(gè)值,這里不再介紹,具體可以看上面的基本語(yǔ)法。

水平右對(duì)齊代碼也一樣、因此代碼變成如下:

復(fù)制代碼
.first-face {
    display: flex;
    display: -webkit-box;
    justify-content:flex-end;
    -webkit-box-pack:end;
}
復(fù)制代碼

如下圖所示:

2. 我們接著來分別看看垂直居左對(duì)齊,垂直居中對(duì)齊,垂直居右對(duì)齊.
一:垂直居左對(duì)齊
我們現(xiàn)在需要使用上align-items屬性了,該屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。具體的語(yǔ)法如上:
同樣為了兼容UC瀏覽器或其他不支持的瀏覽器,我們需要加上box-align 該屬性表示容器里面字容器的垂直對(duì)齊方式;具體的語(yǔ)法如上;
因此代碼變成如下:

復(fù)制代碼
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:center;
    -webkit-box-align:center;
}
復(fù)制代碼

效果如下:

二:垂直居中對(duì)齊

現(xiàn)在垂直已經(jīng)居中對(duì)齊了,但是在水平上還未居中對(duì)齊,因此在水平上居中對(duì)齊,我們需要加上justify-content屬性居中即可;
同樣為了兼容UC瀏覽器,需要加上 -webkit-box-pack:center;
代碼變?yōu)槿缦拢?/p>

復(fù)制代碼
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:center;
    -webkit-box-align:center;
    justify-content:center;
    -webkit-box-pack:center;
}
復(fù)制代碼

效果如下:

三:垂直居右對(duì)齊

原理和上面的垂直居中對(duì)齊是一個(gè)道理,只是值換了下而已;代碼如下:

復(fù)制代碼
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:center;
    -webkit-box-align:center;
    justify-content:flex-end;
    -webkit-box-pack:end;
}
復(fù)制代碼

效果如下:

3. 我們接著來分別看看底部居左對(duì)齊,底部居中對(duì)齊,底部居右對(duì)齊.

一:底部居左對(duì)齊

其實(shí)屬性還是用到上面的,只是值換了一下而已;代碼如下:

復(fù)制代碼
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:flex-end;
    -webkit-box-align:end;
    justify-content:flex-start;
    -webkit-box-pack:start;
}
復(fù)制代碼

效果如下:

二:底部居中對(duì)齊
代碼變?yōu)槿缦拢?/p>

復(fù)制代碼
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:flex-end;
    -webkit-box-align:end;
    justify-content:center;
    -webkit-box-pack:center;
}
復(fù)制代碼

效果如下:

三:底部居右對(duì)齊
代碼變?yōu)槿缦拢?/p>

復(fù)制代碼
.first-face {
    display: flex;
    display: -webkit-box;
    align-items:flex-end;
    -webkit-box-align:end;
    justify-content:flex-end;
    -webkit-box-pack:end;
}
復(fù)制代碼

效果如下:

二: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瀏覽器,所以代碼變成如下:

復(fù)制代碼
.first-face {
    display: flex;
    justify-content: space-between;
    display: -webkit-box;
    -webkit-box-pack:Justify;
}
復(fù)制代碼

效果如下:

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è)代碼變成如下:

復(fù)制代碼
.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;
}
復(fù)制代碼

如上使用 -webkit-box-direction: normal; 使其對(duì)齊方向?yàn)樗綇淖蠖碎_始,-webkit-box-orient: vertical;使用這句代碼告訴
瀏覽器是垂直的,-webkit-box-pack:justify;這句代碼告訴瀏覽器垂直的兩端對(duì)齊。
如下圖所示:

3. 垂直居中兩端對(duì)齊
代碼如下:

復(fù)制代碼
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
復(fù)制代碼

多加一句 align-items: center;代碼; 表示交叉軸上居中對(duì)齊。同理在UC瀏覽器下不支持的,因此我們?yōu)榱思嫒軺C瀏覽器,可以加上如下代碼,因此整個(gè)代碼如下:

復(fù)制代碼
.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;
}
復(fù)制代碼

再加上-webkit-box-align:center;這句代碼,告訴瀏覽器垂直居中。
如下圖所示:

4. 垂直居右兩端對(duì)齊
代碼如下:

復(fù)制代碼
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
復(fù)制代碼

同理為了兼容UC瀏覽器,整個(gè)代碼變成如下:

復(fù)制代碼
.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;
}
復(fù)制代碼

和上面代碼一樣,只是更改了一下垂直對(duì)齊方式而已;
如下圖所示:

注意:下面由于時(shí)間的關(guān)系,先不考慮UC瀏覽器的兼容

三:3丙
代碼如下:
HTML代碼:

<div class="first-face container">
    <span class="pip"></span>
    <span class="pip"></span>
    <span class="pip"></span>
</div>

CSS代碼如下:

復(fù)制代碼
.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;
}
復(fù)制代碼

如下圖所示:

四: 4丙
代碼如下:
HTML代碼:

復(fù)制代碼
<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>
復(fù)制代碼

CSS代碼如下:

復(fù)制代碼
.column{
    display: flex;
    justify-content: space-between;
 }
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
復(fù)制代碼

如下圖所示:

五:5丙
HTML結(jié)構(gòu)如下:

復(fù)制代碼
<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>
復(fù)制代碼

css代碼如下:

復(fù)制代碼
.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;
}
復(fù)制代碼

如下圖所示:

六:6丙
HTML結(jié)構(gòu)如下:

復(fù)制代碼
<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>
復(fù)制代碼

css代碼如下:

復(fù)制代碼
.column{
    display: flex;
    justify-content: space-between;
 }
.first-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
復(fù)制代碼

如下圖所示:

7,8,9丙也是一個(gè)意思,這里先不做了;

Flex布局兼容知識(shí)點(diǎn)總結(jié)

假設(shè)父容器class為 box,子項(xiàng)目為item.
舊版語(yǔ)法如下:
一:定義容器的display屬性。
舊語(yǔ)法如下寫法:

.box {
    display: -moz-box; 
    display: -webkit-box;
    display: box;
}

新版語(yǔ)法需要如下寫:

.box{
    display: -webkit-flex; 
    display: flex;
}

或者 行內(nèi)

.box{
    display: -webkit-inline-flex;
    display:inline-flex;
}

二:容器屬性(舊版語(yǔ)法)
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;
   /*主軸對(duì)齊:左對(duì)齊(默認(rèn)) | 右對(duì)齊 | 居中對(duì)齊 | 左右對(duì)齊*/
}

各個(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; /*Firefox*/
    -webkit-box-align: center; /*Safari,Opera,Chrome*/
    box-align: center;
}

box-align屬性總共有5個(gè)值:

.box{
    box-align: start | end | center | baseline | stretch;
    /*交叉軸對(duì)齊:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 文本基線對(duì)齊 | 上下對(duì)齊并鋪滿*/
}

各個(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; /*Firefox*/
    -webkit-box-direction: reverse; /*Safari,Opera,Chrome*/
    box-direction: reverse;
}

box-direction屬性總共有3個(gè)值:

.box{
    box-direction: normal | reverse | inherit;
    /*顯示方向:默認(rèn)方向 | 反方向 | 繼承子元素的 box-direction*/
}

4.box-orient 屬性

box-orient定義子元素是否應(yīng)水平或垂直排列。

.box{
    -moz-box-orient: horizontal; /*Firefox*/
    -webkit-box-orient: horizontal; /*Safari,Opera,Chrome*/
    box-orient: horizontal;
}

box-orient屬性總共有5個(gè)值:

.box{
    box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
    /*排列方向:水平 | 垂直 | 行內(nèi)方式排列(默認(rèn)) | 塊方式排列 | 繼承父級(jí)的box-orient*/
}

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; /*Firefox*/
    -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
    box-lines: multiple;
}

box-lines屬性總共有2個(gè)值:

.box{
    box-lines: single | multiple;
    /*允許換行:不允許(默認(rèn)) | 允許*/
}

single:伸縮盒對(duì)象的子元素只在一行內(nèi)顯示
multiple:伸縮盒對(duì)象的子元素超出父元素的空間時(shí)換行顯示

6.box-flex 屬性。
box-flex定義是否允許當(dāng)前子元素伸縮。

.item{
    -moz-box-flex: 1.0; /*Firefox*/
    -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/
    box-flex: 1.0;
}

box-flex屬性使用一個(gè)浮點(diǎn)值:

.item{
    box-flex: <value>;
    /*伸縮:<一個(gè)浮點(diǎn)數(shù),默認(rèn)為0.0,即表示不可伸縮,大于0的值可伸縮,柔性相對(duì)>*/
}

7.box-ordinal-group 屬性
box-ordinal-group定義子元素的顯示次序,數(shù)值越小越排前。

.item{
    -moz-box-ordinal-group: 1; /*Firefox*/
    -webkit-box-ordinal-group: 1; /*Safari,Opera,Chrome*/
    box-ordinal-group: 1;
}

box-direction屬性使用一個(gè)整數(shù)值:

.item{
    box-ordinal-group: <integer>;
    /*顯示次序:<一個(gè)整數(shù),默認(rèn)為1,數(shù)值越小越排前>*/
}

新版語(yǔ)法如下:

定義容器的display屬性:

復(fù)制代碼
.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}

/*行內(nèi)flex*/
.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}
復(fù)制代碼

容器樣式

復(fù)制代碼
.box{
    flex-direction: row | row-reverse | column | column-reverse;
    /*主軸方向:左到右(默認(rèn)) | 右到左 | 上到下 | 下到上*/
    
    flex-wrap: nowrap | wrap | wrap-reverse;
    /*換行:不換行(默認(rèn)) | 換行 | 換行并第一行在下方*/

    flex-flow: <flex-direction>  <flex-wrap>;
    /*主軸方向和換行簡(jiǎn)寫*/

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主軸對(duì)齊方式:左對(duì)齊(默認(rèn)) | 右對(duì)齊 | 居中對(duì)齊 | 兩端對(duì)齊 | 平均分布*/

    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉軸對(duì)齊方式:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿 | 文本基線對(duì)齊*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    /*多主軸對(duì)齊:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿 | 上下平均分布*/
}
復(fù)制代碼

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-direction>: 定義彈性盒子元素的排列方向
    <flex-wrap>:控制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è)軸尺寸。

子元素屬性

復(fù)制代碼
.item{
    order: <integer>;
    /*排序:數(shù)值越小,越排前,默認(rèn)為0*/

    flex-grow: <number>; /* default 0 */
    /*放大:默認(rèn)0(即如果有剩余空間也不放大,值為1則放大,2是1的雙倍大小,以此類推)*/

    flex-shrink: <number>; /* default 1 */
    /*縮?。耗J(rèn)1(如果空間不足則會(huì)縮小,值為0不縮?。?/span>*/

    flex-basis: <length> | auto; /* default auto */
    /*固定大小:默認(rèn)為0,可以設(shè)置px值,也可以設(shè)置百分比大小*/

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /*flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫,默認(rèn)值為0 1 auto,*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /*單獨(dú)對(duì)齊方式:自動(dòng)(默認(rèn)) | 頂部對(duì)齊 | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿 | 文本基線對(duì)齊*/
}
復(fù)制代碼

兼容寫法

1. 首先是定義容器的 display 屬性:

復(fù)制代碼
.box{
    display: -webkit-box; /* 老版本語(yǔ)法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本語(yǔ)法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本語(yǔ)法: IE 10 */
    display: -webkit-flex; /* 新版本語(yǔ)法: Chrome 21+ */
    display: flex; /* 新版本語(yǔ)法: Opera 12.1, Firefox 22+ */
}
復(fù)制代碼

這里還要注意的是,如果子元素是行內(nèi)元素,在很多情況下都要使用 display:block 或 display:inline-block
把行內(nèi)子元素變成塊元素(例如使用 box-flex 屬性),這也是舊版語(yǔ)法和新版語(yǔ)法的區(qū)別之一。

2. 子元素主軸對(duì)齊方式(水平居中對(duì)齊)

復(fù)制代碼
.box{
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}
復(fù)制代碼

兼容寫法新版語(yǔ)法的 space-around 是不可用的:如下新版語(yǔ)法space-around;

復(fù)制代碼
.box{
    box-pack: start | end | center | justify;
    /*主軸對(duì)齊:左對(duì)齊(默認(rèn)) | 右對(duì)齊 | 居中對(duì)齊 | 左右對(duì)齊*/

    justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主軸對(duì)齊方式:左對(duì)齊(默認(rèn)) | 右對(duì)齊 | 居中對(duì)齊 | 兩端對(duì)齊 | 平均分布*/
}
復(fù)制代碼

3. 子元素交叉軸對(duì)齊方式(垂直居中對(duì)齊)

復(fù)制代碼
.box{
    box-align: start | end | center | baseline | stretch;
    /*交叉軸對(duì)齊:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 文本基線對(duì)齊 | 上下對(duì)齊并鋪滿*/

    align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉軸對(duì)齊方式:頂部對(duì)齊(默認(rèn)) | 底部對(duì)齊 | 居中對(duì)齊 | 上下對(duì)齊并鋪滿 | 文本基線對(duì)齊*/
}
復(fù)制代碼

4. 子元素的顯示方向。

子元素的顯示方向可通過 box-direction + box-orient + flex-direction 實(shí)現(xiàn),如下代碼:
1. 左到右(水平方向)

復(fù)制代碼
.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
復(fù)制代碼

2. 右到左(水平方向)

復(fù)制代碼
.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;
}
復(fù)制代碼

如上代碼:box 寫法的 box-direction 只是改變了子元素的排序,并沒有改變對(duì)齊方式,需要新增一個(gè) box-pack 來改變對(duì)齊方式。

3. 上到下(垂直方向上)

復(fù)制代碼
.box{
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
復(fù)制代碼

4. 下到上(垂直方向上)

復(fù)制代碼
.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;
}
復(fù)制代碼

5. 是否允許子元素伸縮

復(fù)制代碼
.item{
    -webkit-box-flex: 1.0;
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}
復(fù)制代碼

box語(yǔ)法中 box-flex 如果不是0就表示該子元素允許伸縮,而flex是分開的,上面 flex-grow 是允許放大(默認(rèn)不允許)

復(fù)制代碼
.item{
    -webkit-box-flex: 1.0;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
}
復(fù)制代碼

flex-shrink 是允許縮小(默認(rèn)允許)。box-flex 默認(rèn)值為0,也就是說,在默認(rèn)的情況下,在兩個(gè)瀏覽器中的表現(xiàn)是不一樣的:
介紹如下:

復(fù)制代碼
.item{
    box-flex: <value>;
    /*伸縮:<一個(gè)浮點(diǎn)數(shù),默認(rèn)為0.0,即表示不可伸縮,大于0的值可伸縮,柔性相對(duì)>*/

    flex-grow: <number>; /* default 0 */
    /*放大:默認(rèn)0(即如果有剩余空間也不放大,值為1則放大,2是1的雙倍大小,以此類推)*/

    flex-shrink: <number>; /* default 1 */
    /*縮小:默認(rèn)1(如果空間不足則會(huì)縮小,值為0不縮小)*/
}
復(fù)制代碼

6. 子元素的顯示次序

復(fù)制代碼
.item{
    -webkit-box-ordinal-group: 1;
    -moz-order: 1;
    -webkit-order: 1;
    order: 1;
}
復(fù)制代碼

注意:目前還有一個(gè)問題沒有弄明白,舊版本中的那個(gè)屬性對(duì)應(yīng)著新版本的 align-self屬性,有知道的請(qǐng)告知,謝謝!

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多

    欧美日本道一区二区三区| 欧美日韩有码一二三区 | 亚洲一区二区亚洲日本| av在线免费观看一区二区三区| 亚洲国产成人av毛片国产 | 中文文精品字幕一区二区| 国产又粗又猛又爽又黄的文字| 熟女乱一区二区三区丝袜| 老司机精品国产在线视频| 国产又猛又大又长又粗| 亚洲免费视频中文字幕在线观看 | 99视频精品免费视频播放 | 激情国产白嫩美女在线观看| 99亚洲综合精品成人网色播| 国产又大又猛又粗又长又爽| 黄色片国产一区二区三区| 色婷婷中文字幕在线视频| 五月激情婷婷丁香六月网| 国产午夜精品亚洲精品国产| 中文字幕区自拍偷拍区| 国产三级黄片在线免费看| 国产午夜精品在线免费看| 伊人色综合久久伊人婷婷| 久久福利视频视频一区二区| 久久亚洲国产视频三级黄 | 国产精品香蕉在线的人| 日本一区二区三区久久娇喘| 日韩欧美一区二区不卡视频| 老鸭窝精彩从这里蔓延| 欧美日韩三区在线观看| 日韩人妻有码一区二区| 九九九热在线免费视频| 欧美日韩精品久久亚洲区熟妇人| 一级片黄色一区二区三区| 国内真实露脸偷拍视频| 天堂av一区一区一区| 日韩欧美中文字幕av| 国产精品一区二区三区日韩av| 青青操成人免费在线视频| 成人精品视频在线观看不卡| 国产欧洲亚洲日产一区二区|