当 flex 项目变得太大时，iPad Safari 会忽略边距

Posted 2023-03-05

【中文标题】当 flex 项目变得太大时，iPad Safari 会忽略边距

【英文标题】：iPad Safari ignores margins when flex item gets too large

【发布时间】：2017-10-06 04:07:51

【问题描述】：

我有几个弹性容器，每个容器有 3 个弹性项目。前两个弹性项目有一个margin-right，它将它们彼此隔开，并与第三个项目隔开。前两项总是很短（在这种情况下是恒定宽度），第三项具有可变宽度（可以长到可以换行）。

Here's an example (looks fine in Chrome, not so much on iPad)

li 
  display: flex;
  display: -webkit-flex;


.one, .two 
  margin-right: 10px;

<ul>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor sit amet.</span>
  </li>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias dolore in, nam neque facilis nulla eum beatae, excepturi fugiat.</span>
  </li>
  <li>
    <span class="one">hey</span>
    <span class="two">ho</span>
    <span class="three">Lorem ipsum dolor.</span>
  </li>
</ul>

这在几乎所有浏览器中都运行良好（我省略了 -ms- 前缀，因为它们与此问题无关），但在 iPad 的 Safari 中（特别是运行 Safari 8 的 iPad Air 2，可能还有其他），边距得到当第三个项目试图变大时完全被忽略，前两个项目被挤在一起。

---

预期

---

实际

---

这闻起来非常像 Safari 中的错误，但我在网上找不到任何错误报告或讨论。它在几乎所有其他浏览器中的行为都符合预期。我试过摆弄几乎所有的 flex- 属性，但无济于事。

我首先在寻找一种解决方法，然后还要解释为什么会发生这种情况。

【参考方案1】：

将-webkit-flex: 1; 添加到.three 类。这告诉父容器这个元素是灵活的。 ;-)

【讨论】：

供以后参考。 IE11 显然不喜欢flex: 1，所以flex: 1 0 auto 可以很好地替代。