使用flex方向，flex流时的浏览器差异(Firefox与Chrome)
使用flex方向，flex流时的浏览器差异(Firefox与Chrome)
提问于 2015-07-21 14:25:36
我注意到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的使用有问题，也可能是我做错了什么。无论如何，知道这一点是有帮助的。
回答 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31550706
复制相关文章
相似问题
腾讯云开发者
