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

 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-grow、 flex-shrink和flex-basis，第一個屬性指是相對於其他伸縮項，目前伸縮項在空間允許的情況下可以伸展的量。 第二個屬性
是在空間不夠的情況下，目前伸縮項相對於其他伸縮項可以收縮的量。 第三個屬性是是伸縮項伸縮的基準值。 　　　5、align-self：單一元素對齊方式，屬性與align-items屬性一致。

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

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

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