flex佈局的使用，記念第一次開發手機網站

一直專一於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）