使用flex-direction和flex-flow时，浏览器差异（Firefox vs Chrome）

Question

使用flex-direction和flex-flow时，浏览器差异（Firefox vs Chrome）

5

我注意到在以下 flexbox 布局中 Firefox 和 Chrome 之间有一个有趣的不同：

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 中，其结果是垂直的矩形。重要的部分是在具有 .row 类的元素中使用了 flex-direction: column; 和 flex-wrap: wrap;。

为了得到类似的布局，在 Chrome 中添加 height: 100%; 可以得到垂直的矩形。然而，由于 (空的) header 元素，这将在两个浏览器中创建滚动条。有人知道造成排版差异的原因是什么？有什么最好的方法来解决它吗？

更新：

顺便说一下，我对理解为什么 Chrome 和 Firefox 之间会有差异更感兴趣，而不是仅仅获得一个垂直矩形的布局。也许在使用 flex-direction: column 方面存在问题，或者我做错了什么。无论如何，了解其中的原因都将是有帮助的。

- r_31415

我在我的回答中添加了一个更新。 - user4563161

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user4563161 · Accepted Answer

Flex存在一个缺陷，当您不定义width's和height's时，会导致奇怪的行为，而min-height也已知会引起很多问题。

这里是一些已知问题及其解决方法的存储库。

顺便提一句，我认为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>