CSS边距：0自动;不在Safari浏览器中工作

Question

所以我正在开发一个相当基本的WordPress网站。对于初学者来说，这一切都相对较好，但是在尝试让我的网站在多个浏览器上看起来相同时，我遇到了一个问题。

似乎任何时候我使用保证金：0自动;在我的CSS中，它根本不适用于Safari。起初我不得不添加display：-webkit-flex;让这个工作，所以这是一个问题...

但是现在我的div没有正确对齐，因为Safari似乎忽略了我为保证金设置的规则。

有人可以帮我解决这个问题吗？

我附上了一些截图，以便您了解其中的差异。我附上代码，但它只是在Safari中。 IE和Mozilla看起来与Chrome中的预期相同。

Google Chrome屏幕截图：

Safari截图：

提前感谢您查看此帖并可能解决我的问题。

Answer 1

如果该行正在使用display flex，则不需要边距，因为flex默认为行，然后在整行中应用justify-content。

这样你可以将justify-content设置为空格 -

justify-content

.container {
  margin: 0 auto;
  max-width: 1300px;
  width: 100%;
}

.row {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 200px;
  height: 200px;
  background: teal;
}

<div class="container">
  <div class="row"> 
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

您可以确保在每个“item”类的对齐时通过填充进行响应时内容永远不会触及：justify-content：space-between;仍将解决您的间距问题。

为了适应灵活性并知道所有的细节，请查看FlexFroggy和flex cheat sheet