Flex不止有“容器屬性”來控制底下各個子元素的佈局，還有專門用於子元素自身設定的“子元素屬性”。

緊接著上一篇，繼續總結：

（二）子元素屬性

1、order

定義子元素的排列順序。數值越小，排列越靠前，預設為0。

假設有以下標籤：
<div class="total">
	<div class="one">apple</div>
	<div class="two">banana</div>
	<div class="three">orange</div>
	<div class="four">pear</div>
</div>
樣式設定如下：
.total{display:flex}
.one{order:0}
.two{order:-1}（banana會排第一，因為order值最小）
.three{order:3}（orange排最後，因為orange最大）
.four{order:2}

 

2、flex-grow

定義子元素的放大比例，預設為0，即如果存在剩餘空間，也不放大。

假設有以下標籤：
<div class="total">
	<div class="one">apple</div>
	<div class="two">banana</div>
	<div class="three">orange</div>
	<div class="four">pear</div>
</div>
樣式設定如下：
.total{display:flex}
.one{flex-grow:2}
.two{flex-grow:1}
.three{flex-grow:1}
.four{flex-grow:1}
 

這樣設定的話，那麼在父容器的佈局裡面，各個子元素的分佈比例會變成：apple：banana：orange：pear=2:1:1:1，並且各個子元素的寬度也會自動壓縮好以適應這個比例，省去了不少佈局麻煩。

3、flex-shrink

定義了子元素的縮小比例，預設為1，即如果空間不足，該專案將縮小。

如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。

注意：負值對該屬性無效。

4、flex-basis

定義了在分配多餘空間之前，子元素佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即子元素的本來大小。

它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。

5、align-self

允許單個子元素有與其他子元素不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch

div{
/*共有四個引數*/
	align-self:flex-start;(預設值，從交叉軸的開始位置開始排列)
	align-self:flex-end;（從交叉軸的結束位置開始排列）
	align-self:center;（與交叉軸的中點對齊）
	align-self:stretch;（拉伸鋪滿）
	align-self:baseline;（根據子元素的第一行文字基線對齊）
	align-self:auto;（繼承父元素中的align-items值）
}