display:box和display:flex填坑之路

背景分析:最近做移动端项目时,遇到一个常见的需求:

可以滑动的导航,如下图

display:box和display:flex填坑之路

虽然是很常见的一个布局,但在移动端没有做过,想当然的写下以下的样式,简单描述下:

父元素

width:100%;

overflow: hidden;

overflow-x: scroll;

子元素

float:left

浏览器刷新后,我擦,并不好使,折行了···

停下来想想,看看那手百是怎么实现的:

display:box和display:flex填坑之路

overflow: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
display: -webkit-box;
display: box;

  

使用的是display:box,将手百的样式复制粘贴,嗯,项目好使了。但干活的时候不能只考虑实现业务逻辑,要把背后的原理搞明白。

网上对display:box的描述大多数是:display: box是一种古老的写法,现在基本废弃,使用flex布局。

尝试用flex代替手百写的box布局;

父元素样式:

overflow: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
display: flex;

display:box和display:flex填坑之路

结果发现子元素都挤一起了,本能反应的给子元素加了个宽,然并软。

意识到flex布局的默认值,子元素有flex-shrink:1,在这个默认值下,子元素的宽是不管用的。将子元素加上flex-shrink:0;搞定了。

完美解决,赶紧用到自己的项目里!

美滋滋的让qa一测,发现问题了:

在低版本安卓中,并不能正常显示。

最后排查发现:

安卓和iOS浏览器都是webkit内核,包括变态UC浏览器,对flex支持并不好,但却都支持古老的display:webkit-box;所以在这种情况下,要使用box布局。所以移动端的一定要加浏览器前缀!!

box布局和flex布局并不能简单替换,他俩就不是一个玩意,亲测。最直观的区别就是布局之后,子元素是否会缩水。

关于二者的详细属性,不赘述,网上太多。最后说说常见的面试题,用两种新属性的写法。

子元素上下左右居中显示:

使用display:box
只需要父元素添加以下样式:

display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;

  

使用display:flex

需要父元素添加以下样式:

display: flex;
justify-content: center;
align-items: center;

  最后总结:

网上得来终觉浅,绝知此事要编程!

上一篇:vNext之旅(2):net451、dotnet5.4、dnx451、dnxcore50都是什么鬼


下一篇:Web Essentials之Browser Link