.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實現彈性布局的實例分享的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。