1、flex-direction屬性()
flex-direction:
row
|row-reverse
|column
|column-reverse
- row(默認值):主軸爲水平方向,起點在左端
- row-reverse:主軸爲水平方向,起點在右端
- column:主軸爲垂直方向,起點在上沿
- column-reverse:主軸爲垂直方向,起點在下沿
2、flex-wrap屬性(如果一條軸線排不下,如何換行)
flex-wrap:
nowrap
|wrap
|wrap-reverse
nowrap
(默認):不換行wrap
:換行,第一行在上方wrap-reverse
:換行,第一行在下方
3、flex-flow屬性(上述兩個組合)
flex-flow:
flex-direction
,flex-wrap
flex-direction屬性和flex-wrap屬性的簡寫形式,默認值爲row nowrap
4、justify-content屬性(在主軸上的對齊方式)橫向
justify-content:
flex-start
|flex-end
|center
|space-between
|space-around
flex-start
(默認值):左對齊flex-end
:右對齊center
: 居中space-between
:兩端對齊,項目之間的間隔都相等space-around
:每個項目兩側的間隔相等
5、align-items屬性(在交叉軸上如何對齊)縱向
align-items:
flex-start
|flex-end
|center
|baseline
|stretch
flex-start
:交叉軸的起點對齊flex-end
:交叉軸的終點對齊center
:交叉軸的中點對齊baseline
: 項目的第一行文字的基線對齊stretch
(默認值):如果項目未設置高度或設爲auto,將佔滿整個容器的高度
6、flex-grow屬性(放大比例,默認爲0,即如果存在剩餘空間,也不放大)
flex-grow:
默認爲0
- 如果所有項目的
flex-grow
屬性都爲1
,則它們將等分剩餘空間
(如果有的話) - 如果一個項目的
flex-grow
屬性爲2
,其他項目都爲1,則前者佔據的剩餘空間
將比其他項多一倍
比如父級是width: 800px,三個子級width: 200px,第二項將分掉剩餘的空間比其他項多兩倍(剩餘200px
按照1:2:1
的比例佔據)
7、flex-shrink屬性(縮小比例,默認爲1,即如果空間不足,則縮小)
flex-shrink:
默認爲1
- 如果所有項目的
flex-shrink
屬性都爲1
,當空間不足時,都將等比例縮小 - 如果一個項目的
flex-shrink
屬性爲0
,其他項目都爲1,則空間不足時,前者不縮小
8、flex-basis屬性(在分配多餘空間之前,項目佔據的主軸空間)
flex-basis: | auto
可以設爲跟width或height屬性一樣的值(比如350px),則項目將 佔據固定空間
。
9、flex屬性
flex屬性是flex-grow
, flex-shrink
和 flex-basis
的簡寫,默認值爲0 1 auto
。後兩個屬性可選
flex: auto; (1 1 auto)
flex: none; (0 0 auto)