Flexbox在Safari和IOS中不起作用

Question

我製作了一個響應式彈性網格。它適用於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) {} 

這意味着這些柔性樣式不會被應用。

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> 
 
\t \t \t <span>Category</span> 
 
\t \t \t </h5> 
 
    </div> 
 
    <div class="box"> 
 
     <h5>Project 2<br> 
 
\t \t \t \t <span>Category</span> 
 
\t \t \t \t </h5> 
 
    </div> 
 
    <div class="box"> 
 
     <h5>Project 3<br> 
 
\t \t \t \t <span>Category</span> 
 
\t \t \t \t </h5> 
 
    </div> 
 
    <div class="box"> 
 
     <h5>Project 4<br> 
 
\t \t \t \t <span>Category</span> 
 
\t \t \t \t </h5> 
 
    </div> 
 
    <div class="box"> 
 
     <h5>Project 5<br> 
 
\t \t \t \t <span>Category</span> 
 
\t \t \t \t </h5> 
 
    </div> 
 
    <div class="box"> 
 
     <h5>Project 6<br> 
 
\t \t \t \t <span>Category</span> 
 
\t \t \t \t </h5> 
 
    </div> 
 
    </div> 
 
</section>