Flex Box 概念梳理
前言
最近重新學習了一下Flex Box
,把知識點和相關概念做了一個梳理。加深記憶,方便回顧。
參考內容:
Flex Box
Flexible Box 模型,通常被稱為 flexbox,是一種一維的佈局模型。
之所以說 flexbox 是一種一維的佈局,是因為一個 flexbox 一次只能處理一個維度上的元素佈局,一行或者一列。作為對比的是另外一個二維佈局 CSS Grid Layout,可以同時處理行和列上的佈局。
採用 Flex 佈局的元素,稱為 Flex 容器(flex container),容器裡的子元素稱為專案(item)。
1.容器
-
概念
從容器的角度來看,有兩個不變的軸,主軸由 flex-direction 定義,另一根軸垂直於它。預設定義是:
1) 從左往右的主軸(main axis),主軸開始位置稱為main start
,結束位置稱為 main end
2) 從上到下的交叉軸(cross axis),交叉軸開始位置稱為 cross start
,結束位置稱為 cross end
-
相關屬性
-
flex-direction:定義了主軸方向。決定容器內專案排列方向,預設從左到右
row
。column
表示容器內專案沿著主軸排列,reverse
flex-direction:row | row-reverse | column | column-reverse 複製程式碼
-
-
flex-wrap:決定容器主軸方向上專案是否換行,預設不換行
nowrap
。reverse
表示反向。flex-wrap: nowrap | wrap | wrap-reverse; 複製程式碼
-
flex-flow:是
flex-direction
flex-wrap
屬性的簡寫。預設為:row nowrap
。flex-flow: <flex-direction> || <flex-wrap>; 複製程式碼
-
justify-content:決定容器內專案在主軸上對齊方式。預設左對齊
flex-start
。justify-content: flex-start | flex-end | center | space-between | space-around; /** * flex-start(預設值):左對齊。專案堆放在容器主軸開始位置(main start); * flex-end:右對齊。專案堆放在容器主軸結束位置(main end); * center: 居中。專案沿著主軸居中排列; * space-between:兩端對齊,專案之間的間隔都相等。 * space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。 **/ 複製程式碼
-
align-items:決定容器內專案在交叉軸上對齊方式。預設為
stretch
。align-items: flex-start | flex-end | center | baseline | stretch; /** * flex-start:交叉軸的起點對齊。 * flex-end:交叉軸的終點對齊。 * center:交叉軸的中點對齊。 * baseline: 專案的第一行文字的基線對齊。 * stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。 **/ 複製程式碼
-
align-content:決定容器內專案在交叉軸上內容與剩餘空間對齊方式。預設為
特別注意:該屬性只對設定了`flex-wrap:wrap`的容器生效,並且容器裡的元素構成了多行。stretch
。align-content: flex-start | flex-end | center | space-between | space-around | stretch; /** * flex-start:與交叉軸的起點對齊。 * flex-end:與交叉軸的終點對齊。 * center:與交叉軸的中點對齊。 * space-between:與交叉軸兩端對齊,軸線之間的間隔平均分佈。 * space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。 * stretch(預設值):軸線佔滿整個交叉軸。 **/ 複製程式碼
2.專案
-
概念
專案預設沿主軸排列。單個專案佔據的主軸空間叫做
main size
,佔據的交叉軸空間叫做cross size
。 -
相關屬性
-
order:定義專案在容器主軸方向上的排列順序,數值越小排列越靠前。預設為 0 。
order: <integer>; 複製程式碼
-
-
flex-grow:定義專案的放大比例,預設為 0 ,即便容器存在剩餘空間,也不放大。不允許負值。
flex-grow: <number>; /* default 0 */ /** * 如果所有專案的flex-grow屬性都為1,則它們將等分剩餘空間(如果有的話)。 * 如果一個專案的flex-grow屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。 **/ 複製程式碼
-
flex-shrink:定義專案在容器空間不足時的縮小比例,預設為1,即容器空間不足時該專案要縮小,並且專案內容會換行。不允許負值。
flex-shrink: <number>; /* default 1 */ /** * 如果所有專案的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。 * 如果一個專案的flex-shrink屬性為0,其他專案都為1,則空間不足時,前者不縮小。 **/ 複製程式碼
-
flex-basis:可以理解成設定專案預設大小。定義專案分配多餘空間之前,在主軸上佔據的空間。預設為auto,即專案內容大小。
flex-basis: <length> | auto; /* default auto */ 複製程式碼
-
flex:是
flex-grow
,flex-shrink
和flex-basis
的簡寫,預設值為0 1 auto
。後兩個屬性可選。flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
-
align-self:用於設定單個專案在交叉軸上對齊方式,可覆蓋容器的
align-items
屬性,預設為auto
。如果值為auto
,則計算值為父元素的 ' align-items ' 值,否則為指定值。align-self: auto | flex-start | flex-end | center | baseline | stretch; 複製程式碼
3.總結
以上把 Flex box 基本知識點做了大體的梳理,具體實戰案例後面再更。。。
注:題圖出處flexgrow