Firefox 与 Chrome 的 Flexbox 区别？答案

【问题标题】：Flexbox difference in Firefox vs Chrome?Firefox 与 Chrome 的 Flexbox 区别？
【发布时间】：2017-03-04 19:38:32
【问题描述】：

我已经阅读了一些关于 flexbox 在不同浏览器中的显示方式差异主题的文章，但这些文章都没有帮助我解决布局问题。我已经实现了我自己的基本 flexbox 网格。在 Firefox 中，正确的布局如下所示：。以下是 chrome 中的错误布局：

CSS：

//Actual page css
.point-one {
  background-color: $off-white;
  padding: 20px 20px;

  .point-text {
    padding: 0 20px;
  }
}

// flexbox grid css
.grid {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

.grid-col {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.fill {
  flex-shrink: 0;
}

.col-1-10 {
  flex: 10% 0 1;
}

.col-2-10 {
  flex: 20% 0 1;
}

.col-3-10 {
  flex: 30% 0 1;
}

.col-4-10 {
  flex: 40% 0 1;
}

.col-5-10 {
  flex: 50% 0 1;
}

.col-6-10 {
  flex: 60% 0 1;
}

.col-7-10 {
  flex: 70% 0 1;
}

.col-8-10 {
  flex: 80% 0 1;
}

.col-9-10 {
  flex: 90% 0 1;
}

.align-center{
  align-items: center; 
}

.even-spacing{
  justify-content: space-around;
}

HTML：

    <div className = "fill">
      <div className = "point-one grid align-center ">
        <div className = "col-2-10">
        </div>
        <div className = "col-6-10 point-text">
          <h4> Aggregate all your cloud storage accounts in one place. All your
          dropbox, onedrive, box, and google drive documents are here! </h4>
        </div>
        <div className = "col-2-10">
        </div>
        <div className = "col-1-10">
        </div>
        <div className = "col-8-10 grid even-spacing point-icons">

          <img className="col-1-10 logo" id="db_logo" src={require("../images/dropbox-logos_dropbox-glyph-blue.png")} />
          <img className="col-2-10 logo" src={require("../images/box_cyan.png")} />
          <img className="col-1-10 logo" src={require("../images/product512.png")} />
          <img className="col-3-10 logo" src={require("../images/OneDrive_rgb_Blue2728.png")} />

        </div>
        <div className = "col-1-10">
        </div>
      </div>
    </div>

我试过摆弄填充和供应商前缀，但似乎没有一个可以解决问题。我不认为这应该是一个巨大的变化，但我不太确定。

【问题讨论】：

天哪，我以为我在什么地方读到过这个，但我想我没有尝试过。奇迹般有效！可以给个官方答案吗？
没问题。

标签： html css google-chrome firefox flexbox

【解决方案1】：

在某些情况下，作为 flex-children 的图像会有奇怪的反应。

通常最好将它们包装在自己的 div 中。

至少覆盖align-items:stretch [这也是默认值]。

【讨论】：