彈性(Flex)佈局的使用

最近我參與實施的兩個項目中,一個頁面交互複雜,而另外一個相對傳統,兩個項目相比之下凸顯出了頁面佈局樣式的時間佔比不可忽視,使用了彈性佈局代碼量精簡了很多。css


雖然說如此,彈性佈局每每會有些潛在的問題,且改動後,要當即查看頁面也須要很多時間,所以我把項目中使用彈性佈局過程當中遇到的問題稍做整理,爲你們之後使用時,能夠有效規避這些麻煩。前端


使用場景

前端開發中,網頁佈局是很重要的一部分。以前傳統佈局方案中,基本依賴display + position + float實現,雖然能實現垂直居中,等比排布等,但有時會不夠準確而且使css語句過多。瀏覽器


彈性佈局最大的優勢就是彈性,雖然使用百分比或者媒體查詢也能夠實現響應佈局,但我認爲如下幾種狀況下,flex佈局是比較好的選擇:運維

  • 視口中的特定塊按照比例進行縮放ide

  • 一些以基準線對齊的佈局佈局

  • 模塊垂直居中,水平居中性能

  • 左中右彈性佈局flex


經常使用屬性

一、Flex佈局概念優化

flex全稱是flexbox(flexible Box),即彈性盒子。這一模塊提供更加有效的的方式制定、調整和分佈一個容器裏的項目佈局,即便他們的大小是未知或者是動態的即彈性的。flexbox

包圍在外面的即容器,內部的即爲項目,也就是說採用Flex佈局的元素就是flex容器(display:flex或inline-flex),它的全部子元素稱爲flex項目。容器默認存在兩根軸線,一根主軸(main axis),一根交叉軸(cross axis),項目默認沿主軸排列。


二、經常使用屬性

flex-box(容器)和flex-item(項目)各自都有不一樣的屬性,經過對它們進行不一樣的設置來對總體佈局進行調整以達到想要的效果。主要屬性包括:


flex-direction:

默認狀況下,元素排布從左至右,從上至下。但有時在實際應用中,並不按照默認狀況進行排布。默認的是row(從左至右),能夠設置成column(從上至下)。若是須要設置成反向,則在後面加上「-reverse」。


justify-content:

規定元素在主軸上的對齊方式。默認的是flex-start(左對齊),能夠設置成flex-end(右對齊)和center(居中),也能夠設置成space-between(兩端對齊,且讓剩餘空間均勻的分佈在每兩個元素之間)或是flex-around(剩餘空間均勻包裹每個元素,每兩個元素之間的間距是邊框距盒內元素距離的二倍)。


align-items:

規定元素在交叉軸上的對齊方式。默認是stretch,即元素在豎直方向上充滿整個空間,能夠設置成flex-start(起點對齊)、flex-end(終點對齊)和center(居中),除此以外,可使用baseline對齊,即元素內部第一行文字的基線對齊。


align-content:

當flex盒內元素具備多條軸的時候可使用。默認的是stretch,即軸線佔滿整個交叉軸。能夠設置爲flex-start(與交叉軸的起點對齊),flex-end(與交叉軸的終點對齊),center(豎直居中),和space-between以及space-around。


flex:

能夠將flex-grow, flex-shrink, flex-basis進行連寫。flex-grow屬性定義項目的放大比例,默認爲0,即若是存在剩餘空間,也不放大。flex-shrink屬性定義了項目的縮小比例,默認爲1,即若是空間不足,該項目將縮小。flex-basis屬性定義了在分配多餘空間以前,項目佔據的主軸空間。

瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的默認值爲auto,即項目的原本大小。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,默認值爲flex: 0 1 auto。簡寫還包括:


  • flex: 1; -->> flex: 1 1 0%; flex: none; -->> flex: 0 0 auto

  • flex: auto; -->> flex: 1 1 auto; flex: 0 auto

  • flex: initial -->> flex: 0 1 auto; 即flex的初始值


開發中遇到的問題

一、子元素被壓縮

問題:當設置子容器的長度flex爲1時,其餘的子容器的長度會被壓縮。

解決方法:設置其餘子容器的flex-shrink屬性爲0,這樣就不會被壓縮。


二、圖片使用flex會有間隙

問題:由於有基線的存在,圖片會有一些間隙。

解決方法:設置圖片的display爲block就能夠解決。


三、超出隱藏,overflow失效

問題:

text-overflow: ellipsis;不生效,省略號沒有出現,並且過長的文字把子容器撐開,沒有按預設的超出隱藏。

dd4aff9eb4fa4374add3991bba7a0201.png

解決方法:

設子容器width:0;可能出在於子容器沒有設置寬度,省略符可能須要對父元素設置寬度,設置爲100%無效,當設置爲0的時候,子容器恢復到設定的寬度,省略號也出現了。


四、flex致使設置的子元素寬高失效

問題:

父級設置display:flex後,子級設置的heigth:50px失效,只是被子元素撐開了高度。

818f389a23204e64a85211e9d04e65db.png

解決方法:

flex-grow:0;flex-shrink:0;flex-grow屬性爲是否自動增加空間,flex-shrink屬性爲是否自動縮小空間,默認值爲1,即自動增加/縮小。設置爲0時,不會自動增加/縮小,防止固定大小的元素寬度發生變化。


五、flex佈局滾動,子元素沒法所有顯示

問題:

父級使用flex佈局,列表頁設置flex:1;佔滿空閒空間,可是全部的列沒有徹底顯示出來,滾動條也沒有出現。

image005.png

解決方法:

列表外部使用div或其餘盒子包裹,使用flex佈局,每一個子元素設置最小寬度或實際寬度,或者設width: 0。

image007.png

使用注意

  1. 彈性佈局下每個item默認是沒有間隔的。

  2. 彈性佈局默認不改變項目的寬度,可是它默認改變項目的高度,align-self屬性能夠改變這種行爲,默認值是stretch。

  3. flex只是比例,但不會換行,能夠設置子容器的寬度的百分比,來達到換行的效果,或者使用flex-wrap進行換行。

  4. flex基本能夠徹底取代float,因此若是使用Flex佈局,就儘可能用flex的屬性取代浮動效果。

  5. flex的佈局會使子容器的float、clear和vertical-align屬性失效。


做者:霍俊麗


優質文章

運維轉型 | 運維人再也不只是「救火英雄」

嘉爲科技榮獲ITSS【2019中國卓越智能運維服務商】

企業上雲如何優化性能?

jmeter集羣下腳本日誌和報告處理

企業應用運維自動化應該如何設計?

相關文章
相關標籤/搜索