使用 flex-direction、flex-flow 时的浏览器差异（Firefox 与 Chrome）答案

【问题标题】：Browser differences (Firefox vs Chrome) when using flex-direction, flex-flow使用 flex-direction、flex-flow 时的浏览器差异（Firefox 与 Chrome）
【发布时间】：2015-10-11 14:16:48
【问题描述】：

我注意到 Firefox 和 Chrome 在以下 flexbox 布局中的一个有趣区别：

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0px;
  display: flex;
  flex-direction: column;
}
header {
  border: 1px solid #D3D3D3;
  flex: 0 1 auto;
}
.row {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  flex-wrap: wrap;
}
.tab1 {
  flex: 1 0 48%;
  position: relative;
  margin: 0.5em;
  background-color: orange;
}
.tab2 {
  flex: 1 0 48%;
  position: relative;
  margin: 0.5em;
  background-color: blue;
}
.tab3 {
  flex: 1 0 48%;
  position: relative;
  margin: 0.5em;
  border: 1px solid lightgray;
  background-color: green;
}
.tab4 {
  flex: 1 0 48%;
  position: relative;
  margin: 0.5em;
  border: 1px solid lightgray;
  background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <header>
  </header>
  <div class="row">
    <div class="tab1"></div>
    <div class="tab2"></div>
    <div class="tab3"></div>
    <div class="tab4"></div>
  </div>
</body>

</html>

当我在 Chrome 43 中运行它时，我得到了水平矩形。但是，在 Firefox 39 中，这会产生垂直矩形。重要的部分是flex-direction: column; 和flex-wrap: wrap; 在类.row 的元素中的使用。

为了获得类似的布局，添加 height: 100%; 会在 Chrome 中提供垂直矩形。但是，由于（空）标题元素，这会在两个浏览器中创建一个滚动条。有谁知道这种布局差异的原因是什么以及修复它的最佳方法是什么？

更新：

顺便说一句，我有兴趣了解为什么 Chrome 和 Firefox 存在差异，而不是获得具有垂直矩形的布局。也许flex-direction: column 的使用有问题，或者我做错了什么。无论如何，知道这一点会很有帮助。

【问题讨论】：

对我的回答添加了更新

标签： css google-chrome firefox flexbox

【解决方案1】：

Flex 中有一个错误，当您未定义 width's 和 height's 时会导致奇怪的行为，而且已知 min-height 会导致很多问题。

Here is a repository 了解一些已知问题以及如何解决这些问题。

附注我相信 Safari 需要 -webkit- 供应商前缀来满足 flex 规则

这是一个可能的解决方法，在 FF 和 Chrome 中给出垂直框

html,
body {
  height:100%;
  width:100%;
  margin: 0px;
  display: flex;
  flex-direction: row;
}
header {
  border: 1px solid #D3D3D3;
  flex: 0 1 auto;
}
.row {
  display: flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-wrap: wrap;
}
.tab1 {
  flex: 1 0 20%;
  position: relative;
  margin: 0.5em;
  background-color: orange;
}
.tab2 {
  flex: 1 0 20%;
  position: relative;
  margin: 0.5em;
  background-color: blue;
}
.tab3 {
  flex: 1 0 20%;
  position: relative;
  margin: 0.5em;
  border: 1px solid lightgray;
  background-color: green;
}
.tab4 {
  flex: 1 0 20%;
  position: relative;
  margin: 0.5em;
  border: 1px solid lightgray;
  background-color: yellow;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <header>
  </header>
  <div class="row">
    <div class="tab1"></div>
    <div class="tab2"></div>
    <div class="tab3"></div>
    <div class="tab4"></div>
  </div>
</body>

</html>

【讨论】：

仅供参考，这应该是现在的评论 - 当您找到资源并写下它们，然后将其转换为答案:-)
那太好了。谢谢。我使用 flex-flow 阅读了 Firefox 中的一些错误，但在这种情况下，Chrome 似乎产生了不正确的行为。顺便说一句，我预计初始样式 height: 100%; min-height: 100%; 可能会导致一些问题。
嗨 Rob 我已经为一些已知问题添加了存储库，我没有找到与您的确切情况相匹配的问题，所以我对您的代码和更新感到困惑。
谢谢！实际上，我并没有真正寻找实现垂直列的替代方法。相反，我想了解使用flex-direction: column; 的浏览器之间存在这种差异的原因。您确定我的风格中没有可能导致此问题的非典型因素吗？
我很分层而且已经很晚了，但我很确定它是因为你使用列而不是行 lol 如果你希望它们垂直放置在一起，48% 也相当宽。如果您想要类似于 flex 但不自动移位和格式错误的元素并保持列真实列数可能是更好的 css 替代方案