兼容性
caniuse中的兼容性報告：
總體來說，Flex布局已經得到了所有瀏覽器（高版本）的支持.
兼容性寫法小技巧
flexbox由于歷史原因，出現了多個語法版本，我們可以通過使用autoprefixer來跟蹤最新的瀏覽器版本，自動化生產前綴
a { display: flex;}
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
基本概念
彈性容器：
包含著彈性項目的父元素。通過設置display屬性的值為flex 或 inline-flex來定義彈性容器。
彈性項目：
彈性容器的每個子元素都成為彈性項目。
軸：
每個彈性框布局包含兩個軸。彈性項目沿其依次排列的那根軸
主軸:
垂直于主軸的那根軸為側軸。
和軸相關的屬性
1 flex-direction 屬性確立主軸
2 justify-content 屬性定義了在當前行上彈性項目沿主軸如何排布
flex-start(默認值)：左對齊
flex-end: 右對齊
content: 居中
space-between: 兩端對齊，項目之間的間隔都相等
space-around: 每個項目兩側的間隔相等。所以項目之間的間隔比項目與邊框的間隔大一倍
3 align-items 屬性定義了在當前行上彈性項目沿側軸如何排布
flex-start: 交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center:交叉軸的中點對齊
baseline:項目的第一行文字的基線對齊
stretch(默認值)：如果項目未設置高度或設suto,將占滿整個容器的高度
4 align-self 屬性定義了單個彈性項目在側軸上應當如何對齊，這個定義覆蓋由align-items所確立的默認值
該屬性可能取6個值，除了auto,其他都與align-items屬性完全一致
方位
彈性容器的各個邊，描述了彈性條目流的起點與終點。它們具體取決于彈性容器的主軸與測軸以及由writing-mode確立的方向（從左到右，從右到左等等）；
1 order屬性將元素與序號組關聯起來，并決定哪些元素先出現。數值越小，排列越靠前，默認為0
2 flex-flow屬性是flex-direction 和 flex-wrap屬性的簡寫，決定彈性項目如何排布。默認值是row nowrap
行
根據flex-wrap屬性，彈性項目可以排布在單個行或者多個行中。此屬性控制側軸的方向和新行排列的方向。
尺寸
根據彈性容器的主軸和側軸，彈性項目的寬和高相應稱為主軸尺寸與測軸尺寸
min-height 與 min-width屬性初始值為0
flex屬性是flex-grow, flex-shrink 和 flex-basis屬性的簡寫，確立彈性項目的伸縮性
該屬性有兩個快捷鍵：auto(1 1 auto)和 none(0 0 auto)
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關的值。
