一篇文章弄懂flex布局


 壹 ❀ 引

談到flex布局,我不知道有多少人跟我一樣,在本能的想到justify-content:center與align-items:center兩條屬性之后,除此之外的其它屬性居然顯得格外陌生。

可以說包括我在內的大部分人,都是在被flex垂直水平居中方式所驚艷后才對其有所了解,以至於在日常開發中對於flex的使用,也確實更偏向於元素對齊方式的使用。

對我而言,flex布局不應該局限於對齊方式的使用,熟練掌握它對於頁面布局也是有較大好處的,所以這篇文章主要是偏向於flex屬性筆記式記錄,畢竟真要學習flex阮一峰大神的flex教程才是首選,那么本文開始。

 貳 ❀ 關於flex布局

我們知道當並列書寫多個div標簽,它們會縱向向下排位,如果我們想將多個div並列成一排,就得借助position,float,或display屬性,這便是傳統的盒模型做法。

而flex布局則是一種新的布局方案,通過為修改父div的display屬性,讓父元素成為一個flex容器,從而可以自由的操作容器中子元素(項目)的排列方式。

例如我們讓多個div橫向排列,傳統做法是使用浮動,但浮空后因為脫離文檔流的緣故,父元素會失去高度,這又涉及了清除浮動等一系列的問題。

而flex布局相對簡單很多,修改父元素display:flex,你會發現div自動就排列成了一行,而且沒有浮動之后的副作用,從回流角度考慮,flex的性能更優於float;隨着瀏覽器不斷兼容以及舊版本的淘汰,flex布局注定會成為更為流行的布局方案。

flex布局屬性主要由容器屬性和項目屬性構成,下面我會分開討論這兩類屬性。

 貳 ❀ 容器屬性

1.flex-direction屬性

取值:row(默認) | row-reverse | column | column-reverse

用於控制項目排列方向與順序,默認row,即橫向排列,項目排列順序為正序1-2-3;row-reverse同為橫向排列,但項目順序為倒序3-2-1。

column 與row相反,為縱向排列,項目順序為正序1-2-3,column-reverse同為縱向排列,項目順序為倒序3-2-1。

2.flex-wrap屬性

取值:nowrap(默認) | wrap | wrap-reverse

用於控制項目是否換行,nowrap表示不換行;

舉個例子:比如容器寬度為300px,容器中有6個寬度為60px的項目,nowrap情況下,項目會強行等分容器寬度從而不換行,那么項目實際寬度也就只有50px了,而非我們自己設置的60px。

wrap表示換行,即項目不會等分容器寬度,而是根據自身寬度進行排列,如果超出父容器寬度則自然換行。

wrap-reverse同樣表示換行,需要注意的是第一排會緊貼容器底部,而不是我們想象的項目6緊貼容器頂部,效果與wrap相反。

3.flex-flow屬性

flex-flow屬性是flex-deriction與flex-wrap屬性的簡寫集合,默認屬性為row nowrap,即橫向排列,且不換行,如果需要控制項目排列與換行,推薦使用此屬性,而非單獨寫兩個。

4.justify-content屬性

取值:flex-start(默認) | flex-end | center | space-between | space-around | space-evenly;

用於控制項目在橫軸的對齊方式,默認flex-start即左對齊,center 為居中,對應的flex-end為右對齊。

space-between為左右兩端對齊,即左右兩側項目都緊貼容器,且項目之間間距相等。

space-around為項目之間間距為左右兩側項目到容器間距的2倍,比較特別的布局,日常使用不太多。

space-evenly為項目之間間距與項目與容器間距相等,相當於除去項目寬度,平均分配了剩余寬度作為項目左右margin。

 5.align-items屬性

取值:flex-start | flex-end | center | baseline | stretch(默認)

用於控制項目在縱軸排列方式,默認stretch即如果項目沒設置高度,或高度為auto,則占滿整個容器,下面第一張圖的項目沒設置高度,其余圖片中均為60px。

flex-start會讓項目在縱軸緊貼容器頂部,flex-end與之相反:

center使用最多,自然不會陌生,在縱軸中心位置排列:

baseline比較特殊,它讓項目以第一行文字的基線為參照進行排列:

注意,常理來說justify-content與align-items默認分別處理項目橫軸,縱軸的對齊方式,但如果我們修改了flex-direction為column,它們處理的軸向會交換,也就是justify-content處理縱軸,align-items處理橫軸。

6.align-content

取值:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默認);

用於控制多行項目的對齊方式,如果項目只有一行則不會起作用;默認stretch,即在項目沒設置高度,或高度為auto情況下讓項目填滿整個容器,與align-items類似。注意,如下演示的12個項目我均沒有設置高度。

flex-start ,center,flex-end 與align-items屬性表現一致:

space-around與justify-content保持一致,即項目之間間距為上下兩端項目與容器間距兩倍。

space-evenly同理,項目之間間距與項目到容器之間間距相等,space-between為上下兩側項目緊貼容器。

align-content其實也有baseline等其它可用值,表現與上面介紹過的屬性一致,只是單行項目或多行項目的區別。

 叄 ❀ 項目屬性

介紹完容器屬性,簡單介紹下項目屬性。容器屬性是加在容器上的,那么項目屬性呢,就是寫在項目上的,就好比容器屬性給ul,項目屬性給li差不多一個意思。

1.order

取值:默認0,用於決定項目排列順序,數值越小,項目排列越靠前。

2.flex-grow

取值:默認0,用於決定項目在有剩余空間的情況下是否放大,默認不放大;注意,即便設置了固定寬度,也會放大。

假設默認三個項目中前兩個個項目都是0,最后一個是1,最后的項目會沾滿剩余所有空間。

假設只有第一個項目默認為0,后面兩個項目flex-grow均為1,那么后兩個項目平分剩余空間。

假設第一個項目默認為0,第二個項目為flex-grow:2,最后一個項目為1,則第二個項目在放大時所占空間是最后項目的兩倍。

3.flex-shrink

取值:默認1,用於決定項目在空間不足時是否縮小,默認項目都是1,即空間不足時大家一起等比縮小;注意,即便設置了固定寬度,也會縮小。

但如果某個項目flex-shrink設置為0,則即便空間不夠,自身也不縮小。

上圖中第二個項目flex-shrink為0,所以自身不會縮小。

4.flex-basis

取值:默認auto,用於設置項目寬度,默認auto時,項目會保持默認寬度,或者以width為自身的寬度,但如果設置了flex-basis,權重會width屬性高,因此會覆蓋widtn屬性。

上圖中先設置了flex-basis屬性,后設置了width屬性,但寬度依舊以flex-basis屬性為准。

5.flex

取值:默認0 1 auto,flex屬性是flex-grow,flex-shrink與flex-basis三個屬性的簡寫,用於定義項目放大,縮小與寬度。

該屬性有兩個快捷鍵值,分別是auto(1 1 auto)等分放大縮小,與none(0 0 auto)不放大不縮小。

6.align-self

取值:auto(默認) | flex-start | flex-end | center | baseline | stretch,表示繼承父容器的align-items屬性。如果沒父元素,則默認stretch。

用於讓個別項目擁有與其它項目不同的對齊方式,各值的表現與父容器的align-items屬性完全一致。

到這里,flex布局屬性也就介紹完畢了,老實說,跟着完整寫了一遍,發現之前很多理解都錯誤了,最騷的是部分屬性單詞我都拼錯了,這篇博客就當flex筆記整理,若有緣人能看見,也希望能幫助到你。

 

 轉自:https://www.cnblogs.com/echolun/p/11299460.html
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM