ios - Flexbox 在 Safari 和 IOS 中不工作

Question

我制作了一个响应式 flex 网格。它适用于 Chrome，但不适用于 Safari 和 IOS。我肯定错过了什么。谁能告诉我我做错了什么？

codepen

section {
  max-width: 1280px;
  display: block;
  margin: 0 auto;
}

section:not(.grid) {
  .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .box {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 12em;
    -ms-flex: 1 1 12em;
    flex: 1 1 12em;
  }
}

.wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(12em, 1fr))[auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}

.box {
  padding-right: 1em;
}

.box:last-of-type {
  padding-right: 0;
}

Answer 1

从 SCSS 中删除此封闭元素，但保留其中的所有内容:

section:not(.grid) {}

这意味着这些 flex 样式将不会被应用。

section {
  max-width: 1280px;
  display: block;
  margin: 0 auto;
  border: 1px dashed red;
}


  .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .box {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 12em;
    -ms-flex: 1 1 12em;
    flex: 1 1 12em;
    border: 1px dashed blue;
  }

.wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(12em, 1fr))[auto-fill];
  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
}

.box {
  padding-right: 1em;
}

.box:last-of-type {
  padding-right: 0;
}

<section class="grid">
  <h4>All projects</h4>
  <div class="wrapper">
    <div class="box">
      <h5>Project 1<br>
			<span>Category</span>
			</h5>
    </div>
    <div class="box">
      <h5>Project 2<br>
				<span>Category</span>
				</h5>
    </div>
    <div class="box">
      <h5>Project 3<br>
				<span>Category</span>
				</h5>
    </div>
    <div class="box">
      <h5>Project 4<br>
				<span>Category</span>
				</h5>
    </div>
    <div class="box">
      <h5>Project 5<br>
				<span>Category</span>
				</h5>
    </div>
    <div class="box">
      <h5>Project 6<br>
				<span>Category</span>
				</h5>
    </div>
  </div>
</section>