flex 彈性盒子布局介紹

flex 布局可以說是目前為止最好用的布局方式，但是目前還稍微有一點受到兼容性的影響，它對 IE9 不兼容，但是在未來隨著 IE9 逐漸被淘汰，我相信，它一定會在布局這塊大放異彩，因為它實現了太多我們曾經不能實現的布局效果，而且只要簡單的幾個屬性就可以搞定！

1. 官方解釋

一種彈性盒模型布局方式。

2. 解釋

flex 布局也叫彈性布局，它的特點是可以實現子元素的自適應屏幕大小，可以自由的分配每個 Box 需要占用的空間比例。我們把父元素稱作為：容器。子元素稱作為：項目。容器默認存在兩個軸：水平主軸（mian axis）、垂直交叉軸（cross axis）。左側是主軸的開始點，右側是主軸的結束點，垂直方向上頂部是交叉軸的開始位置，底部是交叉軸的結束位置。

3. 語法

通過下面兩種形式都可以實現彈性盒模型“容器”的初始化。

1. 塊級彈性模塊。

div{
    display:flex;
}

2. 內聯彈性模塊。

div{
    display:inline-flex;
}

容器包含屬性 點擊查看詳細

項目包含屬性 點擊查看詳細

4. 兼容性

5. 實例

1. 創建一個彈性盒模型，容器為塊級，項目自適應。

.demo{
    display:flex
}

2. 創建一個行內盒模型。

.demo{
    display:inline-flex
}

6. 小結

1. 需要父元素首先設置成 dislpay:flex 這樣子元素才能起作用，而子元素的 float 、 clear 、 vertical-align 屬性都失去作用。

2. 子元素可以使用 position 來脫離 flex 布局。