在 IE 中调整 Flexbox 项目之间的间距，同时为其他浏览器使用网格布局

Question

鉴于 IE 不完全支持网格布局，我只在 Internet Explorer 上使用 Flexbox，在其他浏览器上使用网格布局。

有没有办法只在 IE 上添加 margin/padding 到 flex 项目，并且这不会影响网格布局项目？

现在，flexbox 项目之间没有 space - 我知道通常你会向“.grid article”添加边距或填充，但在这种情况下不起作用 b/c这也会为网格项目添加边距或填充（例如，在 Chrome 的网格布局中）。

.grid {
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  display: grid;
  justify-content: start; 
  margin-top: -20px;

} 


.grid article {
  -ms-flex: 0 0 250px;
}


.grid a {
  display: block;
  text-decoration: none;
  color: inherit;

}



@media (min-width: 800px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-row-gap: 70px;
  grid-column-gap: 40px;
  } 
}

@media (min-width: 600px) and (max-width: 799px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-row-gap: 40px;
  grid-column-gap: 30px;
  margin-top: -15px;
  } 

  }    
   <div class="grid> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

</div>

Answer 1

请尝试使用以下方法解决此问题：

方法一：可以在.grid中加上justify-content，让IE中的每个元素保持间距。用于设置或获取弹框元素在主轴（横轴）方向的对齐方式：

.grid {
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    display: grid;
    justify-content: start;
    margin-top: -20px;
    justify-content: space-between; /*add this line*/
}

方法二：您可以使用媒体查询在CSS中定位IE，如下所示，然后在媒体查询将仅适用于 IE 11，外部样式将适用于所有浏览器：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
    .grid article {
        -ms-flex: 0 0 250px;
        margin-right: 225px;
    }
}

.grid article {
    -ms-flex: 0 0 250px;
}

在 IE 中调整 Flexbox 项目之间的间距，同时为其他浏览器使用网格布局

Adjusting spacing between Flexbox items in IE while using Grid Layout for other browsers

internet-explorer

grid-layout

flexbox