CSS display:flex 在 Chrome 中不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/30540750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display:flex not working in Chrome
提问by Kach
I am using the following code to have two boxes side by side of the same height:
我正在使用以下代码将两个盒子并排放置在相同的高度:
<style>
.row {display:flex;}
.col {flex:1;}
</style>
<div class="row">
<div class="col content">some content</div>
<div class="col content raw">some other content</div>
</div>
This worked perfectly in Firefox, but I'm working on the mobile version of my site and added box-sizing:border-box;
to my code. This messed up with the flex for some reason, so I ended up setting box-sizing
to content-box
on most elements again and this fixed it. However, I just realized that the code doesn't work on Chrome, whether desktop or mobile, whether my box-sizing
lines are there or not, and I can't figure out what isn't working. The fact that I'm working on a mobile site but that nothing shows up using Chrome really bothers me.
这在 Firefox 中运行良好,但我正在处理我网站的移动版本并添加box-sizing:border-box;
到我的代码中。由于某种原因,这与 flex 混淆了,所以我最终再次设置box-sizing
为content-box
大多数元素,并修复了它。但是,我刚刚意识到代码在 Chrome 上不起作用,无论是台式机还是移动设备,无论我的box-sizing
线路是否存在,我无法弄清楚什么不起作用。事实上,我正在一个移动网站上工作,但使用 Chrome 却没有任何显示,这让我很困扰。
For the live problem, the page without the box-sizing
is hereand the (supposed to be) mobile-friendly one is here.
Everything works fine on Firefox in both, and the mobile preview on Firefox shows it perfectly too. Can anyone help me figure out what's wrong?
对于现场的问题,而该页面box-sizing
是在这里和(应该是)移动友好的一个是在这里。
两者在 Firefox 上都运行良好,Firefox 上的移动预览也完美地显示了它。谁能帮我弄清楚出了什么问题?
采纳答案by kukis
Change your .row to:
将您的 .row 更改为:
.row {
display: inline-flex;
width: 100%;
}
You may also want to report this bug to team behind Chrome.
您可能还想将此错误报告给 Chrome 背后的团队。
回答by Oriol
The problem is that you didn't clear the floats.
问题是你没有清除浮动。
.header {
float: left;
width: 100%;
border: 1px solid #000;
}
.row {
display: flex;
}
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
Just add
只需添加
.row {
clear: both;
}
.header {
float: left;
width: 100%;
border: 1px solid #000;
}
.row {
display: flex;
clear: both;
}
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
<div class="header">Header</div>
<div class="row">Content</div>
回答by Srikanth Vagga
Use
row{
display: flex;
flex-direction: row;
}
用
row{
display: flex;
flex-direction: row;
}