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）