教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

彈性布局使用介紹:什么情況下用彈性布局?[web前端培訓]

更新時間:2020年03月30日17時55分 來源:傳智播客 瀏覽次數(shù):

各位已經入坑的前端小伙伴,前面咱們已經給大家分享了移動端開發(fā)時候流式布局的應用場景及注意事項,今天再次給大家分享一個布局叫彈性布局,接下來咱們從如下幾個方面,全方位的給大家介紹彈性布局的使用。

1、什么是彈性布局?

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

彈性布局01


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

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

彈性布局02

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

彈性布局03


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

彈性布局04

如果咱們在寫移動端頁面(包括PC端頁面)遇到以上幾種情況的時候,彈性布局是最好的選擇。

三、彈性布局的具體使用

很多小伙伴都清楚彈性布局很好用,但是就是屬性太多記不住而且還容易將屬性對應的效果搞混,所以接下來我將給大家總結一下彈性布局中幾個必須掌握的屬性。

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

彈性布局05


②:設置伸縮盒子的主軸方向,默認伸縮盒子中的主軸是水平顯示,所以默認元素都是一行顯示的。可以通過flex-direction屬性調整主軸的方向,改變元素的顯示方式

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

彈性布局06

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

彈性布局07

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

彈性布局08


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

彈性布局09

③:設置元素在主軸方向的對齊顯示方式,通過justify-content屬性實現(xiàn)

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

彈性布局10


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

1585555677154_彈性布局11.jpg


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

彈性布局12


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

彈性布局13


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

align-items: stretch 默認值的顯示效果如下:

彈性布局14


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

彈性布局15


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

彈性布局16


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

彈性布局17


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

flex-wrap:nowrap 默認效果如下:

彈性布局18


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

彈性布局18


⑥:在伸縮和中元素換行后設置多行對齊方式,通過align-content屬性實現(xiàn)

align-content:stretch默認值顯示效果:

彈性布局20


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

彈性布局21


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

彈性布局22


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

彈性布局23

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

彈性布局24


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

彈性布局25

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

彈性布局26

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

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

彈性布局27


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

彈性布局29


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

彈性布局在網頁中實現(xiàn)快速分配比例,盒子快速對齊優(yōu)勢很大,因為通過簡單的幾個屬性就可以實現(xiàn),進而減少我們設置具體值。但是彈性布局中的屬性對于瀏覽器版本要求比較嚴格,如果瀏覽器版本太低那么彈性布局中的屬性是無法正常使用的。如下圖所示:

彈性布局30

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

猜你喜歡:

Web前端入門教程:html+css+JavaScript下載

0 分享到:
和我們在線交談!