移動WEB開發-----flex子級常見屬性

一、flex屬性

flex屬性定義子項目分配剩餘空間，用flex來表示佔多少份數。

flex:<number>;
//默認值爲0

flex:1;

二、align-self屬性

align-self控制子項自己在側軸上的排列方式

align-self屬性允許單個項目有其他項目不一樣的對齊方式，可覆蓋align-items屬性。
默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

//如果想讓第三個盒子下來，則需執行下面代碼
div span:nth-child(3){
	align-self:flex-end;
}

三、order屬性

order屬性定義項目的排列順序

數值越小，排列越靠前，默認爲0。
注意：和z-index不一樣。

//如果把第二個盒子挪到第一個盒子前面，需執行以下代碼

div span:nth-child(2){
	order:-1;
	//默認是0  -1比0小所以在前面
}