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

Question

我们使用宽度和Flexbox定义了一组列。使用固定宽度背后的原因是绕过关于flex-basis and how IE 10-11 ignore calc()的IE Bug。由于我们使用的是Flexbox，因此我们不希望使用Bootstrap等其他框架可能使用的float: left属性。

除了Safari 9,10.1和11之外，所有浏览器都能正常运行。

我们如何修复对齐方式，以便我们将所有内容排成两行，每行四列用于Safari？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

断点的当前结果＆gt; 1,024像素

断点上的期望结果＆gt; 1,024像素：

Answer 1

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

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

.container:after {
  clear: both;
}