使用flex-direction,flex-flow时的浏览器差异(Firefox与Chrome)

Question

使用flex-direction,flex-flow时的浏览器差异(Firefox与Chrome)

Rob*_*ith 6 css firefox google-chrome flexbox

我注意到以下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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

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

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

更新:

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

Answer 1

小智 3

有一个错误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;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，1 月前
查看次数：	7425 次
最近记录：	7 年，4 月前