什麼時候下使用flex比較方便？
flexbox最主要的作用在於我們可以通過這個屬性快速設置和操作它的子元素的佈局，可以方便地實現居中、居左、居右、兩邊對齊、垂直居中、水平居中的效果；
一般如果遇到這樣的佈局要求，使用flex會非常方便：
- 子元素高度不等，垂直居中
- 多欄佈局，欄目間隔自適應
- 多欄佈局，子元素寬高不等
display:flex 、display:box 之間的區別是什麼？
本質上來講，display:flex 和 display:box 之間沒有什麼區別，僅僅只是各個階段的草案命名。
- W3C 2009年第1次草案：[display:box;] (https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)
- W3C 2011年第2次草案：[display:flexbox | inline-flexbox;] (https://www.w3.org/TR/2011/WD-css3-flexbox-20110322/)
- W3C 2012年第5次草案及以後的候選推薦標準：[display:flex | inline-flex;] (https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/)
所以看到有些css代碼會寫這樣的代碼，不過是爲了兼容各個版本的瀏覽器，因爲一些瀏覽器對flex的佈局支持不一，就需要寫一些兼容的代碼。
display:box;
display:flex;
display: -ms-flexbox;
總的來說display:box 是一種比較老的規範，如果需要兼容一些老的機型需要加上display:box來進行支持，display:flex是新的規範；
父元素設置display:flex後，子元素的某些屬性失效？
在爲某一元素設置flex屬性後，它的子元素都會成爲伸縮項目，clear、float、vertical-align 屬性將會失效；
瀏覽器的兼容性？
可以看到，flex在webkit和moz內核的瀏覽器上表現良好，IE下表現平平，在IE11以後的兼容性一般，只實現了部分兼容（存在大量bug）；
Android4.4版本以上的瀏覽器支持良好；
caniuse中並沒有統計一些國內瀏覽器的兼容情況，如UC瀏覽器和QQ瀏覽器。微信使用的是QQ瀏覽器內核x5，所以在開發一些手機端的東西的時候，就需要考慮QQ瀏覽器的兼容性。
QQ瀏覽器：兼容性良好；
UC瀏覽器：iOS下兼容良好，Android下暫不支持flex-flow，flex-wrap 屬性（同一家瀏覽器在iOS和android上的表現差異這麼大，也真是奇葩）；
兼容寫法：
.flex{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flex; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}使用flexbox佈局有哪些通用的解決方案？
本人也經常在頁面排版過程中使用flex box 進行佈局，因爲flex佈局爲排版提供了非常便利的方法，特別是做一些列表排版的時候非常省事兒，但是畢竟作爲開發者，需要考慮的應用場景不僅僅是chrome，iOS等這些兼容性非常好的場景和設備，我們也要經常面對一些其他的場景，如一些定製版的android系統和雜七雜八的手機品牌。
使用flex.css
https://github.com/1340641314/flex.css
這個css庫代碼比較精簡，使用起來也比較方便，不太完美的地方是，這個庫沒有提供flex-flow的支持；
使用autoprefix
這是一個npm包，可以爲編寫的代碼自動加上前綴，這樣就省去了爲不同的內核添加前綴的麻煩；