關於box,flebox,flex，題主以前也是傻傻的分不清，於是下午查了些資料，資料來說對於盒型布局介紹的較多，然而對於flex版本的來說，並不是很多，也不是很詳細（可能個人搜索關鍵字不對，然而不要在意這些細節），俗話說自己動手豐衣足食嘛，所以就寫了幾個demo，然后有了一點總結，在這里分享給大家，如果有什么錯誤的話，可以看我的小尾巴找我的聯系方式，留言給我，謝謝。
說起來讓未知高度的元素在父級中垂直居中這個難題，一直以來都是用的table來解決的，所以我就試着用css3的屬性來解決，找到了flex，查了下資料后，才發下以下幾點：
1、display:box;//其實是09年css3還不是很規范的時候推出的屬性，所以在游覽器中的表現也是有所不足。（安卓4.4版本以下支持）
2、display:flexbox; // 其實是最新版flex的一種過渡的屬性，其只有IE10支持，但是由於IE10的更新，其實IE10已經支持了最新版的display:flex;所以我們常看到的網上的一堆的flex的兼容代碼其實是不必要加上flexbox。
3、display:flex;//是最新版的flex的屬性，IE10,FF,GG，安卓4.4以上，ios7以上的都是支持的（沒測到具體的版本，個人感覺沒必要）
4、其實還有一個很有趣的現象：如果你的用戶群體是非IE內核的話（手機端），其實你完全可以用box來寫，具體代碼如下：
display:box; 安卓4.4一下的版本和舊點的瀏覽器（注意最新的FF,GG是不支持這個屬性的）
如果想讓他們支持的話你可以加這樣寫：-webkit-display:box; -moz-display:box;加上前綴以后這些最新的瀏覽器就會向下支持這些屬性，是不是很叼的感覺，但是坑爹的IE系列不支持。
5、如果兼容全部的瀏覽器的話其實這樣寫即可：
display:box;
/*
display:-webkit-box;
display:-moz-box;
*/
display:flex;
align-items: center;//最新版的垂直居中
box-align:center;//老版本的垂直居中
/*-webkit-box-align:center;
-moz-box-align:center;*/其實個人覺得帶有注釋符的部分是可以省略的，沒辦法測試安卓4.4和低版本瀏覽器，所以先放上去，但是可以得到一點display:flexbox是沒必要寫的，親測可用。
最后，謝謝大家的閱讀，如果有什么錯誤或者資料可以M我QQ，請填寫好備注（博客園）即可。