flex: 1
是 flex-grow: 1
, flex-shrink: 1
, flex-basis: 0
的合併寫法。
flex-grow
屬性規定項目的放大比例,默認值爲0,即如果存在剩餘空間,也不放大。如果所有項目的flex-grow
屬性都爲1,則它們將等分剩餘空間,如果一個項目的flex-grow
屬性值爲2,其它爲1,則前者佔據的剩餘空間將比其他項多一倍。flex-shrink
屬性規定了項目的縮小比例,默認爲1,即如果空間不足,該項目將縮小。如果所有項目的flex-shrink
屬性都爲1,當空間不足時,都將等比例縮小;如果一個項目的flex-shrink
屬性值爲0,其他項目都爲1,則空間不足時,前者不縮小。flex-basis
屬性用於設置項目在主軸方向上的初始尺寸。默認值爲auto,即項目的本來大小。另外,可以設置具體長度或百分比等樣式。
flex: 1
表示項目會等比例地佔據剩餘的空間,而 flex: auto
,則會根據項目原始尺寸佔據空間(如果有剩餘空間也不會放大項目),如果 flex-basis
值不爲0,則根據 flex-basis
來佔據空間。