Google Chrome で、スペース または 隣接 Flex アイテムを持つ Flexbox コンテナ内に要素を配置すると問題が発生します。 code>center ビューポートに対してコンテンツをさまざまな方向に揃えます。

Firefox、IE11、Edge、または Safari では、要素は常に下に展開されるため、これは問題になりません。

興味があります:

• Chrome は特定の仕様に従って動作しますか?もしそうなら、どれですか?
• そうでない場合、なぜ Chrome でそれを行うのでしょうか? (私見ですが、画面外にランダムに消えるトリガーをクリックするのはひどいユーザー エクスペリエンスです。)
• 何らかの方法で Chrome の動作を変更または無効にすることはできますか?例えば。 CSS またはメタタグ経由ですか?

更新 1: 可能であれば、Chromium 開発者からの洞察/説明を求めるために、Chrome バグ トラッカーに問題 #739860 を送信しました。

2 つの例を以下に挿入します。問題を説明する完全なテスト スイートは、このペンで見つけることができます: https://codepen.io/jameswilson/full/xrpRPg/ この例では、展開/折り畳みの動きがアニメーション化されて目を引くように、 SlipToggle を使用することにしました。同じ動作が詳細タブでも発生しますが、クロスブラウザーはまだサポートされておらず、展開/折りたたみがあまりにも不安定です。

例 1:Chrome 针对齐 Flexbox 間の空格の展示/折叠行は

$('button').click(function() { $(this).next().slideToggle(); })

body { マージン: 30px; フォントファミリー: サンセリフ; } それはさておき、 ディビジョンはさておき、 まとめ、 主要、 ボタン、 詳細ページ、 ボタンP { 背景: rgba(0,0,0,.09); 境界線: なし。 パディング: 20px; マージン: 0; } .flexcontainer { ディスプレイ: フレックス; } 脇に{ フレックス: 1; 位置: 相対的; 最大幅: 25%; 背景: ミントクリーム。 ディスプレイ: フレックス; フレックス方向: 列; 位置: 相対的; } 脇に.スペース{ コンテンツの位置揃え: 間のスペース; } 余談.センター { コンテンツの位置揃え: 中央; } 主要 { フレックス: 3; 位置: 相対的; 最大幅: 75%; 背景: アリスブルー; 垂直配置: 上; 高さ: 100%; } メイン > * * { マージントップ: 20px; } ボタンP { 表示: なし。 }