首頁  >  文章  >  web前端  >  flexbox實現彈性佈局的實例分享

flexbox實現彈性佈局的實例分享

零下一度
零下一度原創
2017-07-02 09:39:102161瀏覽

 FlexBox簡稱“彈性盒子”,除了用於實現彈性佈局,還可以用來居中內容,改變標記中的源碼順序。首先說明IE9及以下瀏覽器不支援FlexBox。

.flex{
 display:flex;
 flex:1;
 justify-content:space-between;
}

 這裡使用了比較新的語法。但是,若要支援安卓瀏覽器(v4以下版本作業系統)和IE10#,最終程式碼得這樣寫: 

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

     這些程式碼一個都不能少,因為近年來瀏覽器不斷以實驗特性推出新功能,而這些實驗性特性都要加上「廠商前綴」。每家瀏覽器廠商都有自己的前綴。 例如-ms-Microsoft-webkit-WebKit- moz-Mozilla。於是,每個新功能要在所有瀏覽器中生效,就得寫好幾遍。首先是帶各廠商前綴的,最後一行才是W3C標準規定的。 下面介紹的都是簡寫模式。

      flex裡主要的幾個屬性:

#          1、flex-direction:column垂直排列,column-reverse垂直反序排列,row橫向排列,row-reverse,橫向反序排列。

#####################          2、align-items:交叉軸上對齊元素,center:居中定位。 flex-start:從父元素起始邊開始對齊。 flex-end:與flex-start相反。 baseline:###讓###Flexbox###元素中的所有項目沿著基線對齊。 ###stretch###:讓###Flexbox###中的所有項目(沒交叉軸)拉伸至與父元素一樣大。 ###############          3、###justify-content :在主軸上對齊元素,flex-start,flex-end,center跟上面差不多,不做太多解釋,space -between和space-around處理盒子之間的間距,只是space-around在兩側都有間距而space-between中間有間距。 ########################################################### ##########

   4、flex:1 1 100px,包含三個屬性flex-growflex-shrinkflex-basis,第一個屬性指是相對於其他伸縮項,目前伸縮項在空間允許的情況下可以伸展的量。 第二個屬性
是在空間不夠的情況下,目前伸縮項相對於其他伸縮項可以收縮的量。 第三個屬性是
是伸縮項伸縮的基準值。
   5、align-self:單一元素對齊方式,屬性與align-items屬性一致。


 關於Flexbox
的對齊,最重要的是理解座標軸。有兩個軸,“主軸”和“交叉軸”。這兩個軸代表什麼取決於
Flexbox
排列的方向。例如,如果將
Flexbox
的方向設定為
row
#,則主軸就是橫軸,而交叉軸就是縱軸。
反之,如果
Flexbox
的方向是
column
,則主軸就是縱軸,而交叉軸為橫軸。


####################################################### ###########################

以上是flexbox實現彈性佈局的實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn