当移动端H5中的display:flex不生效时,给我整破防了

情况:

在项目开发中遇到一个“更多”按钮放置于卡片的右下角时,在安卓9版本的浏览器打开项目,结果测试出来“更多”按钮样式错乱,做了这么久的开发,在移动端给我整破防了。。。

<style>
display:flex;
justify-content:end;
align-items:center;
</style>

情况紧急,于是更换成position:relative定位来实现,最后可以实现效果。现在想知道如何是什么原因造成的。

区别

position和display的区别

position的定位,一般来说就是子绝父相,在文档流中不占据位置,同时可以使用z-index来设置层级
在这里插入图片描述

display:flex布局,使用比较灵活,但是这个css特性是新的,老版本的浏览器不兼容,有时候使用就会失效
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_47389477/article/details/141464910