# 認識CSS#3 FLEX-內元件篇!
###### tags: `CSS`
## <font color=#B6265F>flex</font>
flex 是縮寫，裡面依序包含三個屬性 flex-grow、flex-shrink 和 flex-basis，如果只設定一個則是 flex-grow。

### <font color=#26B676>**flex-grow:**</font>
元件的伸展性，是一個數值，當空間分配還有剩餘時的當前元件的伸展性，預設值為 0，如果設置為 0 則不會縮放。
### <font color=#26B676>**flex-shrink:**</font>
元件的收縮性: 元件的伸展性，是一個數值，當空間分配還不足時的當前元件的收縮性，預設值為 1，如果設置為 0 則不會縮放。
### <font color=#26B676>**flex-basis:**</font>
元件的基準值，可使用不同的單位值。

以下圖為例，伸展值為 2 的空間會佔更多。

## <font color=#B6265F>align-self</font>
align-self 可以調整內元件交錯軸的對齊設定(主軸線則不能另外做設定)，且可以個別設定單一元件的值。

## <font color=#B6265F>Order</font>
這是一個相當特別的屬性，可以重新定義元件的排列順序，順序會依據數值的大小排列。

## <font color=#B6265F>參考資料:</font>
[圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)