摘要:前言春節假期有幸拜讀了張鑫旭大大的關于與的兩篇文章見參考文獻,很有收獲自己在開發的過程中,很多時候都會采用布局,而與這種方式已經很少使用了這次在春假期間學習了,深感的好用與便利。相對于,它多出來一個的屬性,代表拉伸默認屬性。
前言
春節假期有幸拜讀了張鑫旭大大的關于Flex與Grid的兩篇文章(見參考文獻),很有收獲;自己在開發的過程中,很多時候都會采用Flex布局,而Float與inline-box這種方式已經很少使用了;這次在春假期間學習了Grid,深感Grid的好用與便利。趁著這次機會總結一下Grid與Flex的使用。
瀏覽器支持Flex 瀏覽器支持情況
Grid瀏覽器支持情況
可以看出來,相對于Grid來說,Flex無論實在PC端還是移動端都得到了很好的支持,而Grid,在移動端的支持還是差強人意。
FlexBox在flex布局中,有兩個概念需要謹記:容器與元素。在一個html標簽中聲明樣式:display:flexordisplay:inline-flex即聲明了一個flex的容器,在這個容器里面的元素即為flex元素。而flex所有的樣式屬性分為兩類:容器屬性與元素屬性,他們均作用于flex元素,只不過flex容器中聲明的屬性統領flex所有元素整體顯示與排布方式,而flex元素的屬性表示單一元素的排布方式。
下面,根據上面腦圖的思路,依次介紹flex的屬性。
聲明:
下面師范的所有元素都遵從以下HTML結構 和基本樣式
容器屬性 flex-direction1234...
flex-direction顧名思義,是控制flex元素的整體布局方向的,它包括四個屬性:
1.row //從左到右 默認 2.row-reverse //從右到左 3.column //從上到下 4.column-reverse //從下到上
1、flex-direction:row
2.flex-direction:row-reverse
3.flex-direction:column
4.flex-direction: column-reverse
上面四個圖是分別在容器上(.container)設置flex-direction四個屬性得到的效果。
flex-wrapflex-wrap是控制元素是換行顯示還是單行顯示,它共有三個屬性
1.no-wrap //不換行 默認 2.wrap // 換行 3.wrap-reverse //換行反序
為了更加明顯的看出區別,我特別添加了一個難看的邊框。
在容器屬性上添加flex-wrap,分別設置三個wrap屬性
1.flex-wrap: no-wrap
2.flex-wrap: wrap
3.flex-wrap: wrap-reverse
在這里需要注意no-wrap屬性:
如果容器元素設置了最小寬度,而且元素的最小寬度之和>父容器的寬度,則顯示內容溢出。
如果容器元素沒有設置最小寬度或者最小寬度之和<父容器的寬度,則容器元素收縮并將父元素填滿,在上面no-wrap例子中,就沒有設置子元素的最小寬度,讀者可以自行添加驗證。
設置wrap-reverse屬性后,我們可以看到它的換行結果與wrap的換行結果在行這一維度上是相反的。
讀者可以試試將flex-direction設置為column或者其他非默認值,再查看在不同的flex-wrap值下的顯示,會有不同的結果喲。
flex-flowflex-flow是 flex-direction與flex-wrap的統寫,語法是
flex-flow:<‘flex-direction’> || <‘flex-wrap’>
justify-content控制flex元素水平方向的對齊方式,它共有 個屬性:
1.flex-start // 默認值 默認情況下左對齊
2.flex-end // 右對齊
3.center // 居中
下面以space開頭的屬性都是描述剩余空間的排布方式的
4.space-around //剩余空間圍繞在每個子元素的周圍
5.space-between //剩余空間只分布在子元素之間,兩端元素左右沒有剩余空間
6.space-evenly // 剩余空間均勻分布在元素兩端、之間
下面看例子:
1.flex-start
2.flex-end
3.center
4.space-between
5.space-around
6.space-evenly
為了更加明顯的看出不同space下的額外空間分布特點,我使用紅框框出每一屬性下的剩余元素。幾個屬性分布不同不言而喻了。
align-content與justify-content對應,代表元素垂直方向上的分布。而這種分布方式只有在多行的情況下才能夠凸顯出來,單行情況下設置此屬性無效。
相對于justify-content,它多出來一個stretch的屬性,代表拉伸,默認屬性。
1.stretch
2.flex-start
3.flex-end
4.space-between
5.space-around
6.space-evenly
可以看出,它的排布方式與justify-content的邏輯是一致的,只不過方向不同而已。
align-items既然有了多行情況下控制元素排布方式,就會有單行情況下元素排布方式。align-items就是在單行情況下,控制元素排布方式的。共有5個屬性:
1.stretch 默認屬性,會將元素的高度拉伸至父容器的高度
2.flex-start 頂部對齊
3.flex-end 底部對齊
4.baseline 基線對齊
5.center 居中
注意:以上所有的例子展示都是在其他屬性默認情況的顯示情況,如果更改其他屬性(如:
flex-direction 與 flex-wrap)值,會有不同的顯示效果。
order屬性可以控制flex元素的排布順序,flex元素會根據order從小到大依次排布,order的默認值為0,因此如果想要某個元素排在前面,只需要將他的order值設為比0小的值即可。
flex-growflex-grow控制元素所占寬度,默認值為0,當容器內有剩余空間時,flex-grow不為0的元素將會按照以下規則擴展:
容器中只有一個元素設置了flex-grow
1、flex-grow 值>=1 那么這個元素會填充容器的剩余空間
.container .item:first-child{ order:2; flex-grow:1; }
2、flex-grow 在0-1之間,那么這個元素會多占用空間為剩余空間乘以這個flex-grow的值。
.container .item:first-child{ order:2; flex-grow:0.5; }
.container{ display:flex; justify-content:space-around;//如果子元素的flex-grow<1,此屬性依然有效 } .container .item:first-child{ order:2; flex-grow:0.5; }
容器中有多個元素設置了flex-grow
1、所有元素的flex-grow的值之和>1
則占用全部的剩余空間,多占用的剩余空間比例即為各個元素所設置flex-grow的比例。
2、所有元素的flex-grow的值之和<1
所占用的剩余空間的比例即為各個元素的felx-grow的值的比例。
flex-shrink的屬性與flex-grow相反,指的是當空間不足的時候,元素的收縮比例,默認值為1;其核心思路與grow一致,這里不再贅述,讀者可以自行檢驗。
flex-basisflex-basis定義了在分配剩余空間之前,每個元素的默認寬度,默認為auto即元素的寬度;當flex-basis的值不為auto時,其顯示的優先級是高于元素的width的。
flexflex屬性為以上三個屬性的統稱,語法為:
flex: none | auto | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
flex翻譯為中文就是彈性的,所以這個屬性就是說明當有空間過大or空間不足時,每個元素如何分布。
align-self顧名思義,就是確定單個元素垂直分布狀態;其在父容器對應的屬性是algin-items;
其屬性值有align-items一致,只不過多了一個auto默認屬性,表示與父元素的auto-items值一致。
來看例子:
對應css代碼:
.container{ display:flex; align-items:center; } .container .item:nth-child(2n+1){ order:2; flex-grow:2; align-self:flex-start; }
我在父元素上添加align-items屬性,使flex元素居中對齊,在子元素上添加align-self屬性,使奇數子元素向上對齊。
當有多行的情況下,但是align-content未設置,我們可以看到,每一個設置了align-self屬性的子元素會在當前的行按照align-self屬性顯示,但是當align-content屬性設置后,其align-self屬性失效(見下圖)。
對應代碼:
.container{ display:flex; align-content:center; flex-wrap:wrap; } .container .item:nth-child(2n+1){ order:2; flex-grow:2; align-self:flex-start; }總結
flex布局就總結到這里,里面有些類似屬性沒有舉例子,還需要讀者自己去驗證。相對于其他解決方案,flex布局更加簡潔,也更加具有語義性;最顯而易見的,可以很方便的解決我們平時面試過程中遇到的多欄布局,垂直居中問題。
其實細細品讀flex,相比于Grid而言,他還是更加線性化,就是把所有的元素都看成一條線,確定這條線的方向、居中垂直方式,當這條線超過父元素的范圍,我們怎樣處理。所以,雖然flex看似有許多屬性,但是合理的理解后,還是非常簡單的。
這篇是glex與Grid的上篇,主要介紹了flex,而Grid的相關屬性與應用,我們下篇見。
參考文獻張鑫旭:寫給自己看的display: flex布局教程
阮一峰:Flex 布局教程
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/117388.html
摘要:語法如下是簡寫屬性,也可以分別定義行間隔和列間隔。語法如下屬性值得含義同這里不再過多說明,讀者可以自行驗證。 前言 在上篇——JavaScript五十問——對比來說CSS的Grid與FlexBox(上篇),我介紹了Flex的屬性與使用,今天我們來總結一下Grid的具體使用方法,最后會結合Flex與Grid布局講一講二者的聯系與不同。 需要注意得是,Grid布局與我們之前所熟悉的css布...
摘要:前言無論是面試還是在討論瀏覽器優化過程中,都會涉及到去抖動和節流的問題。總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。 前言 無論是面試還是在討論瀏覽器優化過程中,都會涉及到去抖動和節流的問題。總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔;而去抖動會指定事件不觸發的時間間隔...
摘要:前言無論是面試還是在討論瀏覽器優化過程中,都會涉及到去抖動和節流的問題。總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔而去抖動會指定事件不觸發的時間間隔。 前言 無論是面試還是在討論瀏覽器優化過程中,都會涉及到去抖動和節流的問題。總的來說,這二者是一種限制事件觸發頻率的方式。不同的是,節流會指定事件觸發的時間間隔;而去抖動會指定事件不觸發的時間間隔...
摘要:前言與是目前圈子內比較活躍的前端構建工具。對于初學者來說,對這二者往往容易認識不清,今天,就從事件的源頭,說清楚與。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。打包后形成的文件出口。 前言:Webpack 與 gulp是目前圈子內比較活躍的前端構建工具。網上有很多二者比較的文章,面試中也會經常遇到gulp,Webpack的區別這樣的問題。對于初學者來說,對這二...
摘要:組合繼承實現了屬性分離,方法共享下的完美繼承方案繼承我們的主角,,就是對組合繼承的改進。這也是為什么在子類構造函數中一定要顯示調用的原因。 談到繼承,或者更廣義上的:一個對象可以使用另外一個對象的屬性或方法。實現起來無外乎有兩種方式:apply or call 改變this的作用域原型繼承 改變__proto__指向,添加作用域鏈 而JavaScript所有的繼承實現,都是圍繞以上兩點...
閱讀 1980·2021-11-25 09:43
閱讀 664·2021-10-11 10:58
閱讀 1737·2019-08-30 15:55
閱讀 1735·2019-08-30 13:13
閱讀 746·2019-08-29 17:01
閱讀 1848·2019-08-29 15:30
閱讀 804·2019-08-29 13:49
閱讀 2181·2019-08-29 12:13