当flex容器中包含absolute元素时

celineWong7

发布于 2020-11-05 11:05:10

3.7K00

代码可运行

运行总次数：0

代码可运行

我们曾经在 iphone5真机，绝对定位的兼容问题这篇文章指出采用的是 flex + positon:absolute 来布局时，遇到了低版本苹果机的兼容问题，而且后来还用了媒体查询的方式进行折中处理。后来，同事反映在vivo xplay 5A 也遇到了和iphone5机型一样的兼容问题。由于vivo机型就不是很好媒体查询方式特别处理了，于是就不得不深究这个原因，并找到替代方案。

一、问题重现

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .div1{
        width: 300px;
        height: 300px;
        background-color: pink;
        position: relative;
    }
    .div2 {
        width: 200px;
        height: 100px;
        background-color: green;
    }

    .div2{
        position: absolute;
    }
    .div1{
        display: flex;
        justify-content: center;
        /*justify-content: flex-end;*/
    }
</style>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

我们设置了justify-content: center;，不同机型显示区别如下：

在PC端和iphone5以上的机型中：居中显示（正常）

在iphone5真机上的浏览器打开：偏右显示（异常）

有趣的是，我们把 justify-content: center; 改成 justify-content: flex-end; 时，它们的表现也不一致：

在PC端和iphone5以上的机型中：在容器内的最右端（正常）

在iphone5真机上的浏览器打开：跑到容器外了（异常）

当我们把绿色块改成相对定位时.div2{ position: relative; }，就会发现flex布局在任何机子上都正常了。

可见，是因为 flex布局和绝对定位abosolute 起冲突了。

二、问题分析

我们到技术文档查阅一下flex布局的一些说明https://www.w3.org/TR/css-flexbox-1/#abspos-items，可以看到如下一段话：

翻译过来就是：

绝对定位的元素是不参与flex布局的。

尽管文档规定如此，但我们在高版本的机型里面，却能实现两者的配合使用。也许将来这种兼容差异就不存在了，flex容器里面也可以有绝对定位元素了。

三、替代方案

问题原因是找到了，但还是得解决实际问题。

目前个人的需求是：绝对定位元素要实现水平居中，但又无法提前知道该元素的宽度。

最后在小伙伴的帮助下，找到了一种margin:auto的解决方法：

.div2{
        position:absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
    }

该方法的兼容性还没有具体测试，但目前来讲，能适配手头上的所有机型（包括iphone5）。

参考文献：

flex布局中的绝对定位：嗯，完美。还给出了w3.org的技术文档说明。

在flex布局中，不要使用绝对定位（fixed、absolute）：一篇只说明现象，不给出具体原因分析的，同病相怜的家伙。

实现绝对定位元素水平垂直居中的两种方法：完美啊~给出了一个很漂亮的margin：auto方案啊！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

容器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

容器

登录后参与评论

暂无评论