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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 11:14:04  来源:igfitidea点击:

display:flex not working in Chrome

cssgoogle-chromeflexbox

提问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-sizingto content-boxon 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-sizinglines 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-sizingcontent-box大多数元素,并修复了它。但是,我刚刚意识到代码在 Chrome 上不起作用,无论是台式机还是移动设备,无论我的box-sizing线路是否存在,我无法弄清楚什么不起作用。事实上,我正在一个移动网站上工作,但使用 Chrome 却没有任何显示,这让我很困扰。

For the live problem, the page without the box-sizingis 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; }