ios - IOS : flex direction column overlapping elements 中的 Flex 框布局
<p><p>Flexbox 的特性在任何地方都可以使用，除了 I Os 上的 safari mobile。 </p>
<p>我们有 3 张图片，它们应该使用 flexbox 布局以列方向分布，并具有适当的间隔。 </p>
<p>页面:<a href="http://asedis.sp1.netkom.it/?page_id=292" rel="noreferrer noopener nofollow">http://asedis.sp1.netkom.it/?page_id=292</a> </p>
<pre><code>.imgcontrolandmanagmentresizeblablablabl>.vc_column-inner .wpb_wrapper {
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6 */
-webkit-box-orient: vertical;
display: -webkit-flex;
display: -ms-flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
-o-justify-content: space-around;
justify-content: space-around;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
}
</code></pre>
<p>如您所见，我包含了所有供应商前缀并尝试应用“-webkit-box-orient:vertical;”解决问题，但无法正常工作。 </p>
<p>发生的情况是，在 safari mobile 上，您会看到 3 张图像相互重叠。并且不尊重他们在所有其他浏览器(chrome、firefox ..)中已有的行为。</p>
<p>每次我使用 flex box 时都会发生这种情况，safari 总是给我这个问题。
如果我使用 flex-direction: column; flex 的 child 彼此重叠。 </p>
<p>我搜索并尝试了不同的方法，但没有成功。 </p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我在 iphone 中遇到了同样的问题， sibling 重叠，尽管我在 childs 上使用了 <code>flex : 1</code>。但是当我使用 <code>flex-direction : column</code> 时， sibling 重叠了。</p>
<p>所以我通过给一个 sibling 的最小高度来解决它并且它起作用了。</p></p>
<p style="font-size: 20px;">关于ios - IOS : flex direction column overlapping elements 中的 Flex 框布局，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/46469108/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/46469108/
</a>
</p>
页:
[1]