彈性布局為盒模型提供了很多常見場景的解決方案源武,比如居中在塔,左右排列。
理解彈性布局左敌,首先要明確彈性布局中重要的兩根坐標軸:主軸和交叉軸逸雹,默認是水平排列营搅,因此默認的主軸是水平軸云挟,交叉軸式垂直軸。每個軸都有它的起點和終點转质,每一項都要在主軸上和交叉軸上分別占據(jù)空間园欣。
Flex布局的屬性分為容器屬性和項目屬性。
容器屬性
flex-direction
主軸上的項目排列方向休蟹,默認值row
-
flex-direction: row
-
flex-direction: column
-
flex-direction: row-reverse
-
flex-direction: column-reverse
flex-wrap
默認情況下沸枯,所有的項目都會水平或者默認排列在主軸上,如果排列不下赂弓,默認滾動绑榴,flex-wrap
定義了在主軸排列不下時,項目如何排列盈魁, 默認nowrap
-
flex-wrap: wrap
換行翔怎,第一行在上方
-
flex-wrap: nowrap
不換行
-
flex-wrap: wrap-reverse
換行,第一行在下方
flex-flow
flex-flow
是flex-direction
+flex-wrap
, flex-flow: <flex-direction> || <flex-wrap>;
justify-content
定義了項目整體在主軸上的對齊方式杨耙,默認值為flex-start
-
justify-content: center
-
justify-content: flex-start
-
justify-content: flex-end
-
justify-content: space-around
-
justify-content: space-between
-
justify-content: space-evenly
align-items
定義每一行在交叉軸上的對齊方式赤套,默認值為stretch
-
align-items: stretch
-
align-items: flex-start
-
align-items: flex-end
-
align-items: center
-
`align-items: baseline
每一行項目的第一行文字的基線對齊·
align-content
定義項目整體在交叉軸上的對齊方式,默認值為flex-start
-
align-content: flex-start
-
align-content: flex-end
-
align-content: center
-
align-content: stretch
-
align-content: space-around
-
align-content: space-between
-
align-content: space-evenly
項目屬性
order
數(shù)值越小珊膜,排列越靠前于毙,默認值為0,假設將第五個元素order
設為1辅搬,其在整體的項目(非單行)排列中變成最后一個。
flex-grow
當存在剩余空間時脖旱,項目的放大比例堪遂,默認為0,即即使存在剩余空間萌庆,也不放大溶褪。如果將第一個元素的flex-grow
設為0.1,意味著假設存在剩余空間践险,它在主軸上的尺寸將設置為1.1倍和剩余空間的最小值猿妈。如果所有項目的flex-grow
一致,將平等分配剩余空間巍虫,若其余項目均為1彭则,某一個是2,那么他分配的剩余空間將是其余的兩倍(不會優(yōu)先保證自身尺寸的兩倍)
flex-shrink
定義了空間不足時占遥,項目的縮小比例俯抖,默認值為1
當空間充足時,可以看出瓦胎,每個項目的寬度大致為200px芬萍。
當空間嚴重不足時尤揣,可以看出,每個項目的最小寬度為100px柬祠。
因此
flex-shrink
默認值1意味著北戏,當空間不足時,最多壓縮一倍的尺寸漫蛔。當所有的項目flex-shrink
值相同時且大于0嗜愈,空間不足,大家等比例縮谐兔ā芝硬;如果所有的項目flex-shrink
都為0,空間不足時轧房,大家都不縮邪枰酢;如果只有一個為0奶镶,其他都大于零迟赃,那么只有為0的不縮小厂镇;小于零無效纤壁。
flex-basis
flex-basis
屬性定義了在分配多余空間之前,項目占據(jù)的主軸空間捺信。瀏覽器根據(jù)這個屬性酌媒,計算主軸是否有多余空間。它的默認值為auto
迄靠,即項目的本來大小秒咨。
flex
flex
屬性是flex-grow
, flex-shrink
和 flex-basis
的簡寫,默認值為0 1 auto
align-self
align-self
屬性允許單個項目有與其他項目不一樣的對齊方式掌挚,可覆蓋align-items
屬性雨席。默認值為auto
,表示繼承父元素的align-items
屬性吠式,如果沒有父元素陡厘,則等同于stretch
。
-
flex-start
-
flex-end