web-dev-qa-db-ja.com

display：flexはChromeで動作しません

次のコードを使用して、同じ高さの2つのボックスを並べて表示しています。

<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;を追加しました。これは何らかの理由でフレックスを台無しにしたので、ほとんどの要素でbox-sizingをcontent-boxに設定し直し、修正しました。ただし、デスクトップでもモバイルでも、box-sizing行があるかどうかに関係なく、Chromeではコードが機能しないことに気づき、何が機能していないのかわかりません。私はモバイルサイトで作業しているが、Chrome=を使用しても何も表示されないという事実は本当に気になります。

ライブの問題では、box-sizingのないページは here であり、（と思われる）モバイルフレンドリーなページは here です。
。誰が私が間違っているかを理解するのを助けることができますか？

cssgoogle-chromeflexbox
11
Kach

.rowを次のように変更します。

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

このバグをChromeの背後のチームに報告することもできます。

12
kukis

問題は、フロートをクリアしなかったことです。

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

使用する row{ display: flex; flex-direction: row; }

1
Srikanth Vagga