CSS Flexbox 在 Firefox 和 IE 上不正确答案

【问题标题】：CSS Flexbox incorrect on Firefox and IECSS Flexbox 在 Firefox 和 IE 上不正确
【发布时间】：2015-08-20 15:18:47
【问题描述】：

我最近一直在使用 flexbox 开发一个网站，并且一直在 Chrome 上这样做。该网站在 Chrome（和 Safari，根据用户）上看起来很完美，但在 Firefox 和 IE 上查看时存在一些严重问题。我试图在网上查找有关在我的 CSS 中包含哪些前缀以及如何使其在这些浏览器上正常显示的文档，但我真的无法在任何地方找到总结或教程。这是我的 CSS 代码示例，其中包含在 Firefox 和 IE 上无法正确显示的弹性框 -

.header {
  padding: 12px;
  padding-top: 10px;
  padding-bottom: 0px;
  margin: 0px;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  height: 70px;
  background-color: #000000;
}

.header-box {
  padding-left: 15px;
  padding-right: 15px;
  margin: 0;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  align-content: flex-start;
  align-items: flex-start;
  height: 70px;
  width: 1170px;
  background-color: #000000;
}

此代码用于网站顶部的标题栏。我认为通过包含display: -moz-box; 等，可以在 Firefox 上看到它，但是格式混乱，因为框不是居中而是沿着屏幕的左侧，并且里面的框标题都在父容器的顶部而不是底部。感谢您对这个问题的任何见解！

【问题讨论】：

Firefox 从版本 20 开始支持display: flex，你不需要display: -moz-box。请张贴您的html。见How to create a Minimal, Complete, and Verifiable example。
感谢您的快速回复，我想我找到了罪魁祸首之一 - 它与 -webkit-flex-flow: row wrap; 线有关。添加另一行 flex-flow: row wrap; 至少修复了一些火狐的格式化问题，这让我觉得我可能有很多以 -webkit- 为前缀的格式化命令，火狐无法读取
是的，我只是在回答中写了这个。 -webkit- 是供应商前缀，不要指望所有浏览器都能识别它。始终包含标准的无前缀版本。

标签： html css internet-explorer firefox flexbox

【解决方案1】：

In 仅适用于 webkit 浏览器，因为您只使用

-webkit-flex-flow: row wrap;

你应该使用标准

flex-flow: row wrap;

否则，将使用初始值row nowrap。

【讨论】：