Flex-box 結構圖
上圖中有2個重要的關鍵字 main 和 cross (水平與垂直)
Main:
*main-axis: flex container 的水平軸，flex item 都依照他來排列
*main-size: flex item 的寬高
main-start & main-end: 水平軸的起點&終點
Cross:
*cross -axis: flex container 的垂直軸，flex item 都依照他來排列
*cross -size: flex item 的寬高
cross -start & cross -end: 垂直軸的起點&終點
(有 * 表示會被 flex-direction 屬性影響)
Flex-box 屬性:
結構圖中區分 Flex-box 的部分有2個，分別是 container 和 item
來看一下他們各自有哪些可以用的屬性，並說明一下
( Container 容器元件 )
可用屬性
1. display
2. flex-direction
3. flex-wrap
4. justify-content
5. align-items
6. align-content
display: flex | inline-flex | block
display 是 Flex-box 的開關，預設: flex
flex: 他會依容器裡 item 的大小來看，若水平軸有空間先彈性補滿
inline-flex: 容器裡 item 不換行直接水平排到底，會爆出容器
block: 強迫容器裡的每一個 item 都做換行的動作，會爆出容器
flex-direction: row | row-reverse | column | column-reverse
flex-direction 控制容器內 item 排列方向，預設: row
row: item 排列 左到右，上到下
row-reverse: row 倒過來 (不是鏡射，我起初以為是效果會像鏡射)
column: item 排列 上到下，左到右
column-reverse: column 倒過來
flex-wrap: nowrap | wrap | wrap-reverse
flex-wrap 控制容器內 item 換行，預設: nowrap
nowrap: 單行
wrap: 多行
wrap-reverse: 多行，但裡面的 item 反轉
justify-content:
flex-start | flex-end | center | space-around | space-between
justify-content 控制容器內 item 的水平分布，預設: flex-start
flex-start: 靠最左的 main start
flex-end: 靠最右的 main end
center: 水平置中
space-around: item 均分水平，間距也均分
space-between: item 均分水平 最左右的 item 分別靠 main start & main end
align-items: flex-start | flex-end | center | stretch | baseline
align-items 控制容器內 item 的垂直分布(單行)，預設: stretch
flex-start: 靠最上的 cross start
flex-end: 靠最下的 cross end
center: 垂直置中
stretch: item 的垂直分布撐滿到容器的高度
baseline: 全部的 item 靠基線
align-content:
flex-start | flex-end | center | space-around | space-between
align-content 控制容器內 item 的垂直分布(多行)，預設: stretch
flex-start: 靠最上的 cross start
flex-end: 靠最下的 cross end
center: 垂直置中
space-around: 每行均分容器垂直的間距
space-between: 均分容器垂直的間距，最先&最後行靠 cross start & cross end
( Item 項目元件 )
可用屬性
1. align-self
2. order
3. flex-grow
4. flex-shrink
5. flex-basis
6. flex
align-self:
覆蓋既有的 align-items 屬性
order:
透過給他數字，直接達到自訂排列順序
flex-grow，預設: 0
給他數字，讓 item 在 container 中按照比例填滿剩餘的空間
flex-shrink，預設: 1
給他數字，item 如果撐爆 container 按照比例縮小
flex-basis 預設: 0
設定 item的基本大小，單位: px em 等等熟悉的
flex: 前述3種 flex 結合的縮寫方式
縮寫順序: flex-grow flex-shrink flex-basis
EX: flex:1 2 300px;
