這篇筆記是系統學習flex時所記，適合復習使用，新手學習還是要配合圖示和代碼來學習更容易理解。
flex布局模型：彈性盒子（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
首先要弄清楚幾個重要概念：
flex-container：彈性盒子容器
flex-items：flex-container里面的直接子元素叫做flex-items
主軸：main axis：main start & main end & main size
交叉軸：cross axis：cross start & cross end & cross size
用在flex container上的CSS屬性：flex-flow、flex-direction、flex--wrap、justify-content、align-items、align-content
應用在flex items上的CSS屬性：flex、flex-grow、flex-basis、flex-sshrink、order、align-self
開啟flex布局：
.box { display:flex or inline-flex; } // 塊級元素或行內元素
1. flex-direction ：決定了main axis主軸方向，默認沿着main axis主軸從main start開始從main start開始往main end方向排布。
row---默認從左至右, row-reverse----從右至左, column----從上至下, column-reverse----從下至上
2. justify-content：決定了flex items在主軸上的對齊方式
flex-start-----默認與main start對齊， flex-end------與main end對齊， center-------居中對齊
space-between-----兩邊對齊中間等分間距對齊， space-evenly-----等分間距對齊， space-around-----邊距時中間距離一半
3. align-items：決定了flex items在cross axis上的對齊方式
normal------效果相當於stretch-----當flex items在cross axis方向的size為auto時，會自動拉伸至填充flex container
flex-start----默認與cross start對齊， flex-end------與cross-end對齊， center------居中對齊， baseline------基線對齊，第一行文本底部為基線
4. flex-wrap： 默認nowrap，不換行；wrap，換行。
默認情況下，所有的flex items都會在同一行顯示 ， wrap-reverse-----對比wrap，cross start 與cross end 相反
5. flex-flow： 是flex-direction || flex-wrap的簡寫，可以省略，順序任意
6. align-content： 決定了多行flex items 在cross axis上的對齊方式，用法與justify-content類似
stretch-----默認值，與align-items的stretch類似， flex-start-----默認與cross start對齊， flex-end------與cross end對齊， center-------居中對齊
space-between-----兩邊對齊中間等分間距對齊， space-evenly-----等分間距對齊， space-around-----邊距時中間距離一半
7. order： 決定flex items的排布順序，默認為0，值可以設置為任意整數（正，負，0），值越小排在前面
8. align-self： flex items通過它覆蓋flex container設置的align-items
auto（默認值）：遵從flex container的align-items設置，
stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
9. flex-grow： 決定了flex items如何擴展
可以設置任意非負數字（正小數、正整數、0），默認是0。
當flex container在main axis方向上有剩余size時，flex-grow屬性才會生效
如果所有flex items的flex-grow總和sum超過1，每個flex item擴展的size為：flex container的剩余size*flex-grow/sum
如果所有flex items的flex-grow總和sum不超過1，每個flex item擴展的size為：flex container的剩余size*flex-grow
flex items擴展后的最終size不能超過max-width\max-height
10. flex-shrink：決定了flex items如何收縮
可以設置任意非負數字（正小數、正整數、0），默認值是1
當flex items在main axis方向上超過了flex container的size，flex-shrink屬性才會有效
如果所有flex items的flex-shrink總和超過1，每個flex item收縮的size為：flex items超出flex container的size*收縮比例/所有flex items的收縮比例之和
如果所有flex items的flex-shrink總和sum不超過1，每個flex item收縮的size為：flex items超出flex container的size*sum*收縮比例/所有flex items的收縮比例之和
收縮比例=flex-shrink*flex item的base size
base size就是flex item放入flex container之前的size
flex items收縮后的最終size不能小於min-width\min-height
11. flex-basis：用來設置flex items在main axis方向上的base size
auto（默認值）、具體的寬度數值（100px）
決定flex items最終base size的因素，從優先級高到低
max-width\max-height\min-width\min-height > flex-basis > width\height > 內容本身的size
12. flex：是flex-grow || flex-shrink || flex-basis的簡寫，flex屬性可以指定1個，2個或3個值
單值語法：無單位數---grow，有效寬度值---basis，關鍵字none,auto或initial
雙值語法：第一個必須為無單位數，第二位:無單位---shrink,有效寬度值---basis
三值語法：無單位，無單位，有效寬度值
13. 總結：
布局---->左側------->item------->清除浮動（父元素設置固定高度 or clear-fix寫在父元素）
語義化標簽：nav，header，footer，section，article，aside
媒體標簽：video、audio
input：placeholder、multiple、autofocus、type(date、time、tel、color、number、e-mail......)