OGeek|极客世界-中国程序员成长平台

标题: ios - IOS : flex direction column overlapping elements 中的 Flex 框布局 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 18:49
标题: ios - IOS : flex direction column overlapping elements 中的 Flex 框布局

Flexbox 的特性在任何地方都可以使用，除了 I Os 上的 safari mobile。

我们有 3 张图片，它们应该使用 flexbox 布局以列方向分布，并具有适当的间隔。

页面: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 ..)中已有的行为。

每次我使用 flex box 时都会发生这种情况，safari 总是给我这个问题。 如果我使用 flex-direction: column; flex 的 child 彼此重叠。

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

---

Best Answer-推荐答案

我在 iphone 中遇到了同样的问题， sibling 重叠，尽管我在 childs 上使用了 flex : 1。但是当我使用 flex-direction : column 时， sibling 重叠了。

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

关于ios - IOS : flex direction column overlapping elements 中的 Flex 框布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46469108/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/)

Powered by Discuz! X3.4