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