# 認識CSS#2 FLEX-外容器篇!
###### tags: `CSS`

## Flex 特性

<font color='red' size='5'>**Flex的子元件的高度會自動地隨著父元件等高**</font>

## Flex 的外容器與內元件
Flex 中分為外容器與內元件

| Flex 外容器屬性 | Flex 內元件屬性 |
| --------------- | --------------- |
| display | flex |
| flex-flow | flex-grow |
| flex-direction | flex-shrink |
| flex-wrap | flex-basis |
| justify-content | order |
| align-items | align-self |

### flex特性
被flex包起來的所有元素會隨著最大長寬的元素調整位置
codepen : [flex長寬調整特性](https://codepen.io/binlandz123/pen/wvroKdL?editors=1100)
(修改img長寬玩玩看!)
## display
一開始要宣告為 flex 才能使用，如果沒有宣告為 flex，本篇大部分的屬性都無法作用，不過除了 flex 外，還有一個 inline-flex，作用類似於 inline-block + flex。

display:flex | inline-flex;

## flex-direction(外容器)
Flex 決定內元件排序方向的重要屬性，決定<font color='red'>主軸方向</font>
### flex-direction 屬性與效果
| flex-direction 屬性 |
| ------------------- |
| row |
| row-reverse |
| column |
| column-reverse |
## flex-wrap
超出範圍時是否換行的屬性，分為換行、不換行、換行時反轉
### flex-wrap 屬性與效果
| flex-wrap 屬性 |
|:-------------- |
| wrap |
| nowrap |
| wrap-reverse |
## flex-flow
flex-direction 和 flex-wrap的縮寫

flex-flow: <'flex-direction'> || <'flex-wrap'>

## justify-content
與<font color='red'>主軸</font>對齊(與flex-direction對齊)
### justify-content 屬性與效果
| justify-content 屬性 |
|:-------------------- |
| flex-start |
| flex-end |
| space-between |
| space-around |
| center |

## align-items
與<font color='red'>交錯軸對齊</font>
### align-items 屬性與效果
| align-items 屬性 |
|:---------------- |
| flex-start |
| flex-end |
| baseline |
| stretch |
| center |

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