Flexbox无法在Safari和IOS中使用

Question

I have made a responsive flexbox grid. It works in Chrome, but not in Safari and IOS. I must be missing something. Can anyone tell me what I'm doing wrong?

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

Remove this enclosing element from your SCSS, but keep everything inside it:

section:not(.grid) {}

it means those flex styles will NOT be applied.

 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>