当前位置:Gxlcms > html代码 > flex布局的使用,纪念第一次开发手机网站_html/css_WEB-ITnose

flex布局的使用,纪念第一次开发手机网站_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:43人阅读

一直专注于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)

人气教程排行