Heim >Web-Frontend >HTML-Tutorial >flex布局的使用,纪念第一次开发手机网站_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:29:171344Durchsuche

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

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn