如何在 Safari 上将列与 Flexbox 正确对齐？

Question

我们有一组使用宽度和Flexbox 定义的列。使用固定宽度的原因是为了绕过关于flex-basis and how IE 10-11 ignore calc() 的 IE 错误。由于我们使用的是 Flexbox，我们不想使用其他框架（如 Bootstrap）可能使用的 float: left 属性。

在除 Safari 9、10.1 和 11 之外的所有浏览器上都能正常运行。

我们如何解决对齐问题，以便 Safari 将所有内容排成两行，每列四列？

.container {
  max-width: 1440px;
  padding: 0 16px;
  margin: 0 auto;
}

.container:before, .container:after {
  content: '';
  display: table;
 }

.container:after {
  clear: both;
}

.flex__row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: row;
  flex: 0 1 auto;
}

.flex__row--wrap{
  flex-wrap: wrap;
}

.flex__col {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

@media screen and (min-width: 320px) {
  .col--m-s-12 {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .col--t-s-6 {
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .col--t-3 {
    width: 25%;
  }
}

[class*=col--] {
  box-sizing: border-box;
  padding: 2rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="flex__row flex__row--wrap">
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-cube fa-4x" aria-hidden="true"></i>
    </div>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-lock fa-4x" aria-hidden="true"></i>
    </div>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-bath fa-4x" aria-hidden="true"></i>
    </div>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-adjust fa-4x" aria-hidden="true"></i>
    </div>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-bars fa-4x" aria-hidden="true"></i>
    </div>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-arrows fa-4x" aria-hidden="true"></i>
    </div>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-bus fa-4x" aria-hidden="true"></i>
    </div>
    <div class="col--m-s-12 col--t-s-6 col--t-3 flex__col ns-flex__col--padding-sml">
      <i class="fa fa-archive fa-4x" aria-hidden="true"></i>
    </div>
  </div>
</div>

断点上的当前结果 > 1024px

断点上的期望结果 > 1024px：

Answer 1

当我删除下面的 css 时，我能够解决问题。

.container:before, .container:after {
  content: '';
  display: table;
 }

.container:after {
  clear: both;
}