彈性盒子布局詳解[web前端培訓(xùn)]

各位已經(jīng)入坑的前端小伙伴，前面咱們已經(jīng)給大家分享了移動(dòng)端開(kāi)發(fā)時(shí)候流式布局的應(yīng)用場(chǎng)景及注意事項(xiàng)，今天再次給大家分享一個(gè)布局叫彈性布局，接下來(lái)咱們從如下幾個(gè)方面，全方位的給大家介紹彈性布局的使用。

1、什么是彈性布局?

彈性布局(flex container)，頁(yè)面中任何一個(gè)元素只要設(shè)置了display:flex屬性，那么當(dāng)前盒子都稱為彈性盒子。彈性盒子默認(rèn)有兩條軸: 默認(rèn)水平顯示的主軸 和 始終要垂直于主軸的側(cè)軸(也叫交叉軸)，在彈性盒子中所有的子元素都是沿著主軸方向顯示。推薦了解黑馬程序員web前端課程。

二、什么情況下用彈性布局?

①: 以攜程移動(dòng)頁(yè)面為例，在網(wǎng)頁(yè)中當(dāng)遇到需要將父元素按照奇數(shù)進(jìn)行等分，比如攜程中紅色區(qū)域是將父元素3等分。如果用流式布局那么就需要設(shè)置33。33%。如果用彈性布局只需要給每一個(gè)子元素設(shè)置一個(gè)屬性flex:1即可快速實(shí)現(xiàn)。

②:以淘寶網(wǎng)頁(yè)為例，當(dāng)我們需要頁(yè)面中多個(gè)子元素快速實(shí)現(xiàn)在父元素中以左右距離適中顯示的時(shí)候，這個(gè)時(shí)候我們不需要設(shè)置任何的px值，只需要給元素設(shè)置justify-content:space-around就可以實(shí)現(xiàn)。

③:以攜程為例，當(dāng)頁(yè)面中出現(xiàn)子元素按照其他比例分割父元素的時(shí)候，依然可以通過(guò)彈性盒子中的flex實(shí)現(xiàn)快速實(shí)現(xiàn)。如圖:紅色區(qū)域是按照 2:1:2 和 2:1:1:1的比例顯示。

如果咱們?cè)趯懸苿?dòng)端頁(yè)面(包括PC端頁(yè)面)遇到以上幾種情況的時(shí)候，彈性布局是最好的選擇。

三、彈性布局的具體使用

很多小伙伴都清楚彈性布局很好用，但是就是屬性太多記不住而且還容易將屬性對(duì)應(yīng)的效果搞混，所以接下來(lái)我將給大家總結(jié)一下彈性布局中幾個(gè)必須掌握的屬性。

①:彈性布局第一步就是先給父元素設(shè)定為彈性盒子，既設(shè)置屬性:display:flex。如代碼所示:

②:設(shè)置伸縮盒子的主軸方向，默認(rèn)伸縮盒子中的主軸是水平顯示，所以默認(rèn)元素都是一行顯示的。可以通過(guò)flex-direction屬性調(diào)整主軸的方向，改變?cè)氐娘@示方式

flex-direction: row的顯示效果如下圖所示:

flex-direction:row-reverse的顯示效果如下圖所示:

flex-direction:column的顯示效果如下圖所示:

flex-direction:column-reverse的顯示效果如下圖所示:

③:設(shè)置元素在主軸方向的對(duì)齊顯示方式，通過(guò)justify-content屬性實(shí)現(xiàn)

justify-content:flex-start的顯示效果如下:

justify-content:flex-end的顯示效果如下:

justify-content:space-between的顯示效果如下:

justify-content:space-around的顯示效果如下:

④:設(shè)置彈性盒子中元素在側(cè)軸(交叉軸)方向的對(duì)齊方式通過(guò)align-items實(shí)現(xiàn)。

align-items: stretch 默認(rèn)值的顯示效果如下:

align-items:flex-start顯示效果如下:

align-items:flex-end顯示效果如下:

align-items:center顯示效果如下:

⑤:在伸縮盒子中，默認(rèn)所有的子元素超出父容器寬度后都不換行顯示，如果希望讓超出父元素后換行顯示，可以通過(guò)flex-wrap屬性實(shí)現(xiàn)

flex-wrap:nowrap 默認(rèn)效果如下:

flex-wrap:wrap 顯示效果如下:

⑥:在伸縮和中元素?fù)Q行后設(shè)置多行對(duì)齊方式，通過(guò)align-content屬性實(shí)現(xiàn)

align-content:stretch默認(rèn)值顯示效果:

align-content:flex-start 顯示效果如下:

align-content:flex-end 顯示效果如下:

align-content:center 顯示效果如下:

align-content: space-between 顯示效果如下：

align-content: space-around顯示效果如下:

以上屬性都是給彈性盒子設(shè)置的屬性，各位小伙伴要注意。如下代碼所示:

⑦:如果希望彈性盒子中子元素按照任何一個(gè)比例顯示，可以給子元素設(shè)置flex屬性，如下圖所示:

Flex: 1。代表子元素占父元素空間寬度的一份。

Felx:2代表子元素占父元素空間寬度的2份，依次類推

三: 彈性布局優(yōu)缺點(diǎn)分析

彈性布局在網(wǎng)頁(yè)中實(shí)現(xiàn)快速分配比例，盒子快速對(duì)齊優(yōu)勢(shì)很大，因?yàn)橥ㄟ^(guò)簡(jiǎn)單的幾個(gè)屬性就可以實(shí)現(xiàn)，進(jìn)而減少我們?cè)O(shè)置具體值。但是彈性布局中的屬性對(duì)于瀏覽器版本要求比較嚴(yán)格，如果瀏覽器版本太低那么彈性布局中的屬性是無(wú)法正常使用的。如下圖所示:

寫在最后的幾句話，送給大家。學(xué)習(xí)任何知識(shí)都不是為了去解決某個(gè)特定問(wèn)題的。我們學(xué)的知識(shí)可以當(dāng)成是我們工具包中的一個(gè)新工具。在恰當(dāng)?shù)臅r(shí)候使用恰當(dāng)?shù)墓ぞ呓鉀Q問(wèn)題就可以了。針對(duì)彈性布局中還有其他屬性，由于我們?cè)趯戫?yè)面的過(guò)程中不是經(jīng)常用到，所以今天主要分享給大家彈性布局中我們必須會(huì)的。 好的這個(gè)章節(jié)就講到這里，我們下一個(gè)章節(jié)講解rem布局。

猜你喜歡：
什么是流式布局?什么情況下用?