一直專註於PC網站的開發，不曾接觸手機網站，於今日機緣巧合也是公司業務需要，併在之前學習過flex的佈局，於是一併實踐。碰到的問題還是很多的，主要是談談flex佈局。flex佈局是css3里的內容，一種新的佈局方式，也稱之為 彈性佈局，主要是為了取代 inline-bolck 和float 為總佈局...
一直專註於PC網站的開發，不曾接觸手機網站，於今日機緣巧合也是公司業務需要，併在之前學習過flex的佈局，於是一併實踐。碰到的問題還是很多的，主要是談談flex佈局。
flex佈局是css3里的內容，一種新的佈局方式，也稱之為 彈性佈局，主要是為了取代 inline-bolck 和float 為總佈局。當然，這兩種佈局還是有各自的優勢的，畢竟存在就有他的理由。
歷史進程是 box-->flexbox --> flex
由於是在谷歌調試，所以很理所當然的以為手機上的瀏覽器都是支持html5+css3的於是就有一段版本
1 display: flex; 2 justify-content: space-between; 3 align-items:center;
等等
在http://www.responsinator.com/ 等測試網站表現得挺滿意的
拿到真機上測，無論蘋果還是安卓佈局全亂了。後來才知道在蘋果上運行需要加首碼，因為瀏覽器都是-webkit-內核的，主要是因為還沒實現標準化，都是私有屬性，於是有了下麵的寫法
display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items:center; align-items:center;
嗯，蘋果上表現得相當不錯，我用的4，除了屏幕小了點其他還是可以接受的。
拿到安卓上，呵呵，基本上公司的安卓機全軍覆沒，佈局沒有一點改變。測試機器一般都是近些時候的，最久的話也是1-2年前的機器。後來才知道原來是根本不是識別flex佈局,只能用box（也就是很早之前的語法）來解決，就得到瞭如下的寫法
1 .display_flex(){ 2 display: -webkit-box; 3 display: -webkit-flex; 4 display: flex; 5 } 6 .justify(){ 7 -webkit-justify-content: space-between; 8 -webkit-box-pack:justify; 9 justify-content: space-between; 10 } 11 .justify(@ju) 12 { 13 -webkit-justify-content: @ju; 14 -webkit-box-pack:@ju; 15 justify-content: @ju; 16 } 17 18 .align(@align) 19 { 20 -webkit-box-align:@align; 21 -webkit-align-items: @align; 22 align-items: @align; 23 } 24 .flex-flow-column(){ 25 -webkit-box-orient:block-axis; 26 -webkit-flex-flow: column nowrap; 27 flex-flow: column nowrap; 28 } 29 .flex(@f){ 30 -webkit-box-flex:@f; 31 -webkit-flex: @f; 32 flex: @f; 33 }
註：這是less的寫法（我學的不是很好）
不過中間有些遺憾新的flex里有一種叫做“超出自動換行”的功能，box里也有類似的屬性，但是所有的瀏覽器都不支持，所以只能選擇其他的佈局（如前面提到的float）來代替。
總結：
flex的佈局基本都是考慮內核，PC上不是很推薦，因為國內大都要相容IE7-8，可以考慮在移動端使用（畢竟只有安卓和蘋果）。總而言之這種佈局還是挺不錯的，有學習的必要，像他們說的html5+css3必是未來的主流方向。
如有更好的解決方案望請不吝賜教，謝謝。
引用的資料：
http://www.w3cplus.com/css3/using-flexbox.html （舊的box）
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html （新的flex）
