現今css主流排版方式 display: flex; 前端必熟練，這邊整理了常用Flex設定
相關資源連結：
Flex青蛙：從遊戲中深入理解各種flex很好用！
Flex六角海盜船：從遊戲中深入理解各種flex很好用！
六角學院:Flex模擬器
國外CSS網站Mozilla解說Flex:裡面也有模擬器,更細緻的說明與操作
國外圖文詳細解說Flex
★flex-direction 主軸方向：用來控制「資訊流向」的主軸
- flex-direction: row;
[default]Emmet:fxdritems排序 從左至右 (主軸為X軸)
主軸 → | 交錯軸↓ - flex-direction: row-reverse;
Emmet:fxdrr
items排序 從右至左 (主軸為X軸)
主軸 ← | 交錯軸↓ - flex-direction: column;
Emmet:fxdc
items排序 從上到下 (主軸為Y軸)
主軸 ↓ | 交錯軸→ - flex-direction: column-reverse;
Emmet:fxdcr
items排序 從下到上 (主軸為Y軸)
主軸 ↑ | 交錯軸→
★justify-content 主軸對齊：控制items主軸的對齊、間距
※如設計軟體或word工具裡的align功能
- justify-content: flex-start;
[default]Emmet:jcfs向起始點靠齊 - justify-content: center;
Emmet:jcc
向中間靠齊，如置中 - justify-content: flex-end;
Emmet:jcfe向終點靠齊 - justify-content: space-between;
Emmet:jcsbitems靠主軸（左右）兩邊靠邊，中間平均分配 - justify-content: space-around;
Emmet:jcspad
items離主軸（左右）兩邊間距為中間平均分配的一半，中間平均分配 - justify-content: space-evenly;
Emmet:jcspey
items到box的距離、items之間的間距，都平均分配
★flex-wrap 換行
- flex-wrap: nowrap;
[default]Emmet:fxwn不換行，自適應 - flex-wrap: wrap;
Emmet:fxww
換行依box寬度 - flex-wrap: wrap-reverse;
Emmet:fxwwr
以wrap的排序行列，只反轉行列 / 以主軸為鏡，反轉內容
★align-items 交錯軸對齊：控制items交錯軸的對齊、間距、填滿
💡決定元素整體在容器的什麼位置。
- align-items: stretch;
[default]Emmet:aish交錯軸滿版 - align-items: flex-start;
Emmet:aifxs對齊交錯軸起點 - align-items: flex-end;
Emmet:aifxe對齊交錯軸終點 - align-items: center;
Emmet:aic置中交錯軸 - align-items: baseline;
Emmet:aie其交叉起始邊距邊緣與其基線之間距離最大的項目與線的交叉起始邊緣齊平。
☆align-contents 內容有斷行時的行距對齊
💡決定行之間的間隔
※只有一行的時候沒有任何效果。
※搭配多行使用，同時需搭配 flex-wrap 屬性，來決定行與行之間隔多遠。
- align-content: stretch;
Emmet:acfxs每一行都被拉伸以填滿容器 - align-content: flex-start;
Emmet:acfxs多行都集中在頂部 - align-content: flex-end;
Emmet:acfxe多行都集中在底部 - align-content: center;
Emmet:acc置中交錯軸 - align-content: space-between;
Emmet:acsbitems靠交錯軸（上下）兩邊靠邊，中間平均分配 - align-content: space-around;
Emmet:acsaitems離主軸（上下）兩邊間距為中間平均分配的一半，中間平均分配
★flex-flow =flex-direction+flex-wrap的縮寫
※這個縮寫屬性接受兩個屬性的值，兩個值中間以空格隔開
- flex-flow: column wrap;
Emmet:fxfw=flex-direction: column; + flex-wrap: wrap;
-
更細緻的操作：
- flex-basis 為基本大小
- flex-grow 為剩餘空間分配
- flex-shrink 為縮小空間配置
◆flex-basis 設置內容框的基礎大小
- flex-basis: auto;
Emmet:fxba - flex-basis: 0;
Emmet:fxb0 - flex-basis: 200px;
Emmet:fxb200
◆flex-grow 指定空間的佔比多少
※依據basis的設定，用來分配空間比例，用grow去指定佔比多少
- flex-grow: 1;
Emmet:fxg1
- flex-grow: 2;
Emmet:fxg2
- flex-grow: 3;
Emmet:fxg3
◆flex-shrink 縮小空間
※設定當空間壓縮時誰先被壓，與 flex-grow 相反，flex-grow 是膨脹，flex-shrink 是縮小
※在使用中，flex-shrink 與其他 flex 屬性 flex-grow 和 flex-basis 一起使用，通常使用 flex 簡寫來定義。
- flex-shrink: 0;
Emmet:fxs0
- flex-shrink: 1;
Emmet:fxs1
- flex-shrink: 2;
Emmet:fxs2
更多綜合運用
◆align-self 單個元素指定、自身交錯軸對齊：第一個items在自己的範圍內交錯軸移動對齊
※如果一個 flexbox 項目的橫軸邊緣是自動的，那麼 align-self 將被忽略。
- align-self: stretch;
Emmet:assh在自己的範圍內 填滿 - align-self: center;
Emmet:asc在自己的範圍內 置中 - align-self: flex-start;
Emmet:asfxs在自己的範圍內 向起點對齊 - align-self: flex-end;
Emmet:asfxe在自己的範圍內 向終點對齊
◆order 單個元素指定，主軸上調整順序
※元素的屬性默認值爲0，但是我們設置這個屬性爲正數或負數。
- order: 3;
Emmet:od3 - order: -1;
Emmet:od-1 - order: 2;
Emmet:od2 - order: 4;
Emmet:od4
超級常用：
css flex 垂直置中
{
display: flex;
justify-content: center;
align-items: center;
}
