Question

除了在I Os上使用safari mobile之外，所有Flexbox都在使用。

我们有3个图像，应该使用flexbox布局在列方向上分布，并且在适当的空间之间。

Page：http://asedis.sp1.netkom.it/?page_id=292

.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%;
}

如您所见，我包含了所有供应商前缀，并尝试应用“-webkit-box-orient：vertical”。解决问题，但无法正常工作。

在safari mobile上你会看到3张图片相互重叠。而不是尊重他们在所有其他浏览器中已有的行为（chrome，firefox ..）。

每次我使用弹性盒时都会发生这种情况，safari总是给我这个问题。如果我使用flex-direction：column;弯曲的孩子互相重叠。

我搜索并尝试了不同的方法但没有成功。

Answer 1

我在iphone中遇到了同样的问题，尽管我在孩子上使用了flex : 1，但兄弟姐妹却重叠了。但是当我使用flex-direction : column时，兄弟姐妹是重叠的。

所以我通过给一个兄弟姐妹最小的高度来解决它，并且它起作用了。

IOS中的Flex框布局：flex方向列重叠元素

1 个答案: