flex 彈性盒子布局介紹flex 布局可以說是目前為止最好用的布局方式，但是目前還稍微有一點受到兼容性的影響，它對 IE9 不兼容，但是在未來隨著 IE9 逐漸被淘汰，我相信，它一定會在布局這塊大放異彩，因為它實現(xiàn)了太多我們曾經(jīng)不能實現(xiàn)的布局效果，而且只要簡單的幾個屬性就可以搞定！ 1. 官方解釋一種彈性盒模型布局方式。 2. 解釋flex 布局也叫彈性布局，它的特點是可以實現(xiàn)子元素的自適應屏幕大小，可以自由的分配每個 Box 需要占用的空間比例。我們把父元素稱作為：容器。子元素稱作為：項目。容器默認存在兩個軸：水平主軸（mian axis）、垂直交叉軸（cross axis）。左側是主軸的開始點，右側是主軸的結束點，垂直方向上頂部是交叉軸的開始位置，底部是交叉軸的結束位置。 3. 語法通過下面兩種形式都可以實現(xiàn)彈性盒模型“容器”的初始化。 塊級彈性模塊。
div{
display:flex;
}內聯(lián)彈性模塊。
div{
display:inline-flex;
}容器包含屬性 點擊查看詳細 | 參數(shù)名稱 | 參數(shù) | 解釋 |
|---|
| flex-direction | row | row-reverse | column | column-revers | 定義主軸上項目的的方向 | | 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 | 多軸(多行)下項目的（水平）對齊方式 |
項目包含屬性 點擊查看詳細 | 參數(shù)名稱 | 參數(shù) | 解釋 |
|---|
| flex-grow | number |
| | flex-shrink | number |
| | flex-basis | 像素 |
| | flex | || |
| | order | number |
| | align-self | auto | flex-start | flex-end | center | baseline | stretch | 修改單個項目 |
4. 兼容性| IE | Edge | Firefox | Chrome | Safari | Opera | ios | android |
|---|
| 10+ | 12+ | 28+ | 4+ | 6.1+ | 12.1+ | 7+ | 4.4 |
5. 實例創(chuàng)建一個彈性盒模型，容器為塊級，項目自適應。
.demo{
display:flex
}創(chuàng)建一個行內盒模型。
.demo{
display:inline-flex
}6. 小結需要父元素首先設置成 dislpay:flex 這樣子元素才能起作用，而子元素的 float 、 clear 、 vertical-align 屬性都失去作用。 子元素可以使用 position 來脫離 flex 布局。
| 
