* Flexbox前後有三個版本，較老的瀏覽器會存在兼容性問題。IE11部分支持，IE10部分支持（需加-ms-）。
* CSS的columns在伸縮容器上無效；float、clear、vertical-align在伸縮項目上無效；
最新版本Flexbox的使用：
伸縮容器display: flex | inline-flex
伸縮項目：伸縮容器的每個子元素（需要盒修復的元素除外）；
伸縮流方向flex-direction: row | row-reverse | column |column-reverse
伸縮換行flex-wrap：nowrap | wrap | wrap-reverse
複合屬性flex-flow：<' flex-direction '> || <' flex-wrap '>
主軸對齊justify-content：flex-start | flex-end | center |space-between | space-around
測軸對齊align-items（容器）：flex-start | flex-end | center |baseline | stretch
align-self（項目）：auto | flex-start | flex-end | center | baseline | stretch
* 如果'align-self'的值爲'auto'，則其計算值爲元素的父元素的'align-items'值，如果其沒有父元素，則計算值爲'stretch'。
堆棧伸縮行align-content：flex-start | flex-end | center |space-between | space-around | stretch
* 當伸縮容器的側軸還有多餘空間時，align-content可以用來調準「伸縮行」在伸縮容器裏的對齊方式，這與調準伸縮項目在主軸上對齊方式的 <' justify-content '> 屬性類似。本屬性在只有一行的伸縮容器上沒有效果。
flex-start：各行/列向彈性盒容器的起始位置堆疊。 flex-end：各行/列向彈性盒容器的結束位置堆疊。 center：各行/列向彈性盒容器的中間位置堆疊。 space-between：各行/列在彈性盒容器中平均分佈，緊貼容器兩端。 space-around：各行/列在彈性盒容器中平均分佈，容器兩端保留間距。 stretch：各行將會伸展以佔用剩餘的空間。 baseline：伸縮項目的基線。 |
justify-content | align-content | align-items |
伸縮性flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
擴展比率flex-grow：<number>（默認值爲0），根據此比率分配剩餘空間。
收縮比率flex-shrink：<number>（默認值爲1），超出容器按比率移除。
基準值flex-basis：<length> | <percentage> | auto | content
顯示順序order：<number>（默認值爲0），伸縮容器會從序號最小的項目開始佈局。
/* 圖片來源於 @大漠 《圖解CSS3》
屬性總結自 @飄零霧雨 《CSS參考手冊》 */