当flex容器中包含absolute元素时
当flex容器中包含absolute元素时
我们曾经在 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方案啊！
腾讯云开发者
