Flexbox 在 Safari 和 IOS 中不起作用答案

【问题标题】：Flexbox not working in Safari and IOSFlexbox 在 Safari 和 IOS 中不起作用
【发布时间】：2017-09-28 04:25:09
【问题描述】：

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

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

【问题讨论】：

flexbox 支持回 iOS 9。您正在测试哪个版本？ caniuse.com/#search=flexbox
我在 iOS 10 上测试
好的，您期望的行为是什么？
它应该是响应式的 - 当您调整窗口大小时，从 6 列变为 5 列再到 4 列等...
在 Safari 中它显示所有堆叠的项目

标签： ios css safari flexbox css-grid

【解决方案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>

【讨论】：