各位已經入坑的前端小夥伴,前面咱們已經給大家分享了移動端開發時候流式布局的應用場景及注意事項,今天再次給大家分享一個布局叫彈性布局,接下來咱們從如下幾個方面,全方位的給大家介紹彈性布局的使用.
一:什麼是彈性布局?
彈性布局(flex container),頁面中任何一個元素隻要設定了display:flex屬性,那麼目前盒子都稱為彈性盒子.彈性盒子預設有兩條軸: 預設水準顯示的主軸 和 始終要垂直于主軸的側軸(也叫交叉軸),在彈性盒子中所有的子元素都是沿着主軸方向顯示。
二:什麼情況下用彈性布局?
①: 以攜程移動頁面為例,在網頁中當遇到需要将父元素按照奇數進行等分,比如攜程中紅色區域是将父元素3等分.如果用流式布局那麼就需要設定33.33%.如果用彈性布局隻需要給每一個子元素設定一個屬性flex:1即可快速實作.
②:以淘寶網頁為例,當我們需要頁面中多個子元素快速實作在父元素中以左右距離适中顯示的時候,這個時候我們不需要設定任何的px值,隻需要給元素設定justify-content:space-around就可以實作.
③:以攜程為例,當頁面中出現子元素按照其他比例分割父元素的時候,依然可以通過彈性盒子中的flex實作快速實作.如圖:紅色區域是按照 2:1:2 和 2:1:1:1的比例顯示.
如果咱們在寫移動端頁面(包括PC端頁面)遇到以上幾種情況的時候,彈性布局是最好的選擇.
三:彈性布局的具體使用
很多小夥伴都清楚彈性布局很好用,但是就是屬性太多記不住而且還容易将屬性對應的效果搞混,是以接下來我将給大家總結一下彈性布局中幾個必須掌握的屬性.
①:彈性布局第一步就是先給父元素設定為彈性盒子,既設定屬性:display:flex.如代碼所示:
②:設定伸縮盒子的主軸方向,預設伸縮盒子中的主軸是水準顯示,是以預設元素都是一行顯示的.可以通過flex-direction屬性調整主軸的方向,改變元素的顯示方式
flex-direction: row的顯示效果如下圖所示:
flex-direction:row-reverse的顯示效果如下圖所示:
flex-direction:column的顯示效果如下圖所示:
flex-direction:column-reverse的顯示效果如下圖所示:
③:設定元素在主軸方向的對齊顯示方式,通過justify-content屬性實作
justify-content:flex-start的顯示效果如下:
justify-content:flex-end的顯示效果如下:
justify-content:space-between的顯示效果如下:
justify-content:space-around的顯示效果如下:
④:設定彈性盒子中元素在側軸(交叉軸)方向的對齊方式通過align-items實作.
align-items: stretch 預設值的顯示效果如下:
align-items:flex-start顯示效果如下:
align-items:flex-end顯示效果如下:
align-items:center顯示效果如下:
⑤:在伸縮盒子中,預設所有的子元素超出父容器寬度後都不換行顯示,如果希望讓超出父元素後換行顯示,可以通過flex-wrap屬性實作
flex-wrap:nowrap 預設效果如下:
flex-wrap:wrap 顯示效果如下:
⑥:在伸縮和中元素換行後設定多行對齊方式,通過align-content屬性實作
align-content:stretch預設值顯示效果:
align-content:flex-start 顯示效果如下:
align-content:flex-end 顯示效果如下:
align-content:center 顯示效果如下:
align-content: space-between 顯示效果如下
align-content: space-around顯示效果如下:
以上屬性都是給彈性盒子設定的屬性,各位小夥伴要注意.如下代碼所示:
⑦:如果希望彈性盒子中子元素按照任何一個比例顯示,可以給子元素設定flex屬性,如下圖所示:
Flex: 1.代表子元素占父元素空間寬度的一份.
Felx:2代表子元素占父元素空間寬度的2份,依次類推
三: 彈性布局優缺點分析
彈性布局在網頁中實作快速配置設定比例,盒子快速對齊優勢很大,因為通過簡單的幾個屬性就可以實作,進而減少我們設定具體值.但是彈性布局中的屬性對于浏覽器版本要求比較嚴格,如果浏覽器版本太低那麼彈性布局中的屬性是無法正常使用的.如下圖所示:
寫在最後的幾句話,送給大家.學習任何知識都不是為了去解決某個特定問題的.我們學的知識可以當成是我們工具包中的一個新工具.在恰當的時候使用恰當的工具解決問題就可以了.針對彈性布局中還有其他屬性,由于我們在寫頁面的過程中不是經常用到,是以今天主要分享給大家彈性布局中我們必須會的. 好的這個章節就講到這裡。
黑馬最新活動：
黑馬程式員2020年java中級程式員學習路線圖、全部資源免費大放送，點選下方：“了解更多”的連結就可進入頁面領取哦。