显示：flex 在 Chrome 中不起作用

Posted 2023-03-06

【中文标题】显示：flex 在 Chrome 中不起作用

【英文标题】：display:flex not working in Chrome

【发布时间】：2015-08-12 23:30:33

【问题描述】：

我正在使用以下代码让两个盒子并排在同一高度：

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

这在 Firefox 中运行良好，但我正在开发我的网站的移动版本，并将 box-sizing:border-box; 添加到我的代码中。由于某种原因，这弄乱了 flex，所以我最终在大多数元素上再次将 box-sizing 设置为 content-box 并修复了它。但是，我刚刚意识到代码在 Chrome 上不起作用，无论是桌面还是移动设备，无论我的 box-sizing 行是否存在，我无法弄清楚什么不起作用。我在一个移动网站上工作，但使用 Chrome 没有任何显示，这一事实真的让我很困扰。

对于实时问题，没有box-sizing 的页面是here，（应该是）适合移动设备的页面是here。 两者在 Firefox 上一切正常，Firefox 上的移动预览也完美显示了这一点。谁能帮我找出问题所在？

【问题讨论】：

CSS Flexbox，AFAIC，在 webkit 中基本不行。

【参考方案1】：

将您的 .row 更改为：

.row 
    display: inline-flex;
    width: 100%;

您可能还想将此错误报告给 Chrome 背后的团队。

【讨论】：

非常感谢，修复了它，并且仍然可以在 Firefox 下运行！我会去做的。在多个浏览器上工作简直就是地狱。

这是 Chrome 中迄今为止尚未修复的问题之一：flexbugs

【参考方案2】：

问题是你没有清除浮动。

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

只需添加

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

【讨论】：

哦，谢谢你提醒我这个！由于我之前使用的代码，我实际上在float:left; 上有了标题，但这实际上100% 没用，所以删除浮动实际上使我的其他代码与display:flex; 再次工作。所以不需要明确，但我解决了这个问题！

【参考方案3】：

用途：

row 
    display: flex;
    flex-direction: row;