我有以下结构
<div id="1">
<img src="targetImage">
<div id="2">
google maps component in here
</div>
</div>
问题是我想使用 flexbox 使 img 元素居中。这可以通过组合 align-items 和 justify-content 轻松实现，并且效果很好。
问题是当我在 id="1" google maps 的 div 上添加 display:flex 时消失了。
当然这是有道理的，因为谷歌地图基于不同的显示属性，可能是block。我想知道如何使用 id="2" 回退到 div 上的 display:initial。简单地设置它似乎不起作用。
最佳答案
为您的 2 div 添加这个
width: 100%;
当您将父级设置为 flex 时， map 容器会失去其宽度，因为谷歌地图内容是绝对定位的。我在我工作过的一个站点上对此进行了测试，当您将父级设置为 flex 时， map 会消失。如果你使用检查器，你可以看到 flex 元素没有宽度
关于css - 取消显示 flex ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49611800/