Question

我注意到以下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中，这会产生垂直矩形。重要的是使用flex-direction: column;和flex-wrap: wrap;在类.row的元素中。

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

更新：

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

Answer 1

Flex中存在一个错误，当您未定义width's时会导致奇怪的行为，而height's也会导致min-height导致很多问题。< / p>

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-direction，flex-flow时的浏览器差异（Firefox与Chrome）

1 个答案: