问使用flex方向，flex流时的浏览器差异(Firefox与Chrome)
EN

Stack Overflow用户

提问于 2015-07-21 14:25:36

回答 1查看 10.2K关注 0票数 5

我注意到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的使用有问题，也可能是我做错了什么。无论如何，知道这一点是有帮助的。

google-chrome

firefox

flexbox

css

回答 1

Stack Overflow用户

发布于 2015-07-21 14:33:45

在Flex中有一个bug，当您不定义width's和height's时，它会导致奇怪的行为，而众所周知，min-height也会导致很多问题。

一些已知问题的这是一个存储库以及如何解决这些问题。

附带注意:我相信Safari需要-webkit-供应商前缀作为flex规则

这里有一个可能的解决办法，在FF和Chrome中，and的垂直框

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>