技術標籤：flex佈局css3

flex屬性：flex屬性定義子專案分配剩餘的空間，用flex來表示佔多少份數。
語法：flex：1；表示在剩餘空間中，佔1份。
flex：2；表示在剩餘空間中，佔2份。
佔的份數越大，元素的大小就越大。

.father span:nth-child(2) {
/*在剩餘空間中佔2份*/
    flex: 2;
    background-color: tomato;
}
.father span:nth-child(3) {
/*在剩餘空間中佔3份 所以這個span佔的份數大於第二個span*/
    flex: 3;
    background-color
 
:violet;
}

align-self：控制子項自己在側軸上的排列方式。
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可以覆蓋align-items屬性，預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
語法格式：

span:nth-child(2) {
/*設定自己在側軸上的排列方式，不跟大眾走 貼著尾部排列*/
	align-self:flex-end;
	/*從頭部開始*/
	align-self:flex-start;
	/*在側軸上居中對齊*/
	align-self:center;
}