傳智播客旗下品牌:|||||

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

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

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

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

1、什么是彈性布局?

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

彈性布局01


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

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

彈性布局02

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

彈性布局03


③:以攜程為例,當頁面中出現子元素按照其他比例分割父元素的時候,依然可以通過彈性盒子中的flex實現快速實現。如圖:紅色區域是按照 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屬性實現

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

彈性布局10


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

1585555677154_彈性布局11.jpg


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

彈性布局12


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

彈性布局13


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

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

彈性布局14


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

彈性布局15


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

彈性布局16


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

彈性布局17


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

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

彈性布局18


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

彈性布局18


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

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


三: 彈性布局優缺點分析

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

彈性布局30

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

猜你喜歡:

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

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

uids

北京校區

    14天免費試學

    基礎班入門課程限時免費

    申請試學名額

    15天免費試學

    基礎班入門課程限時免費

    申請試學名額

    15天免費試學

    基礎班入門課程限時免費

    申請試學名額

    15天免費試學

    基礎班入門課程限時免費

    申請試學名額

    20天免費試學

    基礎班入門課程限時免費

    申請試學名額

    8天免費試學

    基礎班入門課程限時免費

    申請試學名額

    20天免費試學

    基礎班入門課程限時免費

    申請試學名額

    5天免費試學

    基礎班入門課程限時免費

    申請試學名額

    0天免費試學

    基礎班入門課程限時免費

    申請試學名額

    12天免費試學

    基礎班入門課程限時免費

    申請試學名額

    5天免費試學

    基礎班入門課程限時免費

    申請試學名額

    5天免費試學

    基礎班入門課程限時免費

    申請試學名額

    10天免費試學

    基礎班入門課程限時免費

    申請試學名額