先聊聊歷史
在2009年最早版本的Flexbox規(guī)范中，我們編寫為“display:box;”，
中期版本的Flexbox；我們編寫為“display:flexbox;”
而目前的規(guī)范版本，我們定義“display:flex;”。flexbox規(guī)范的制定可謂是艱辛百變，
但目前使用的最新版本草案已于今年3-1日正式進入W3C的候選推薦標準（Candidate Recommendation）階段，這也就意味著關于flexbox的最終規(guī)范即將落地。
版本VS兼容
如下圖所示，除了Opera mobile12，移動端的各大瀏覽器都是支持flexbox的舊版語法的，但不包含flex的wrap屬性。
信手拈來的flexbox最佳實例
(以下代碼片段均遵循flexbox移動端全兼容性寫法，已驗證機型列表見文章最后) 我們先來回顧一下flexbox的屬性體系：直白的解釋，我們常說的“flexbox”其實包含“父元素”，“子元素”2個部分，將“父元素”定義為一個flexbox，則在"父元素"里的“子元素們”就被賦予了可以自由伸縮的能力。 賦予神奇能力的代碼片段如下：
1.用flex做提示icon
這里用到了flex父元素的“align-items”屬性。 指定元素沿側軸對齊方式 ```
align-item: flex-start | flex-end | center | space-between | space-around | stretch;
一句屬性設置，就可以完成頂部對齊，居中對齊或是底部對齊的切換，簡單方便值得擁有。
###**2.用flex做列表元素**
同樣，只需要用flex父元素的“align-items”屬性，就可以制作靈活多變的列表元素了。如下圖所示，3種狀態(tài)的變形都不需要修改CSS文件，只需要按需隱藏DOM結構就搞定。
####**這里多注意1個Tips：像下圖例子中的左側圖片，右側按鈕這些固定寬度的子元素，不需要增加“flex:1”的能力，維持原樣即可。**
###**3.用flex做tab**
做均分的tab，應該是flexbox最常見的一個功能了，實現原理很簡單，只需要給“父元素”，“子元素”分別賦予“display：flex”,"flex：1"即可。子元素的寬度不會根據內容的長短而發(fā)生改變。如下圖所示，前臺同學增加或刪減tab數量，只需要增減DOM結構即可，無需樣式的修改。
####**★重點兼容TIPS: 在舊版的規(guī)范中，使用比例伸縮布局時，子元素的內容長短不同會導致無法“等分”，這個時候，我們需要給子元素設置一個“width:0%”來解決問題。** **★重點兼容TIPS: 不要給flexbox里的子元素設置“margin:auto”的屬性，在部分安卓機下，它會導致該元素的寬度撐開到100%占位**
希望以上的demo對移動端開發(fā)的小伙伴們有用。當然，flexbox還有一些很帥氣的屬性，例如order，wrap等等，它們只是暫時還不被移動端所有的系統兼容，咋們的x5內核已經剛剛表示全面兼容flexbox的所有屬性。關于flexbox的未來我們敬請期待就好！
**最后，附贈一個全DEMO的合集：**[http://115.159.36.96/tikizheng/flextest/demo.html](http://115.159.36.96/tikizheng/flextest/demo.html)