ブラウザ間でラップされた Flex アイテムの一貫した水平展開を実現するにはどうすればよいですか?

ラップされたコンテンツの水平方向に展開するフレックス コンテナ

CSS フレックスボックスを使用する場合、ブラウザーは特定のプロパティに対してさまざまな動作を示す場合があります。特に、列に配置された画像のグリッドを作成し、それらを折り返せるようにすると、ブラウザ間で一貫した動作を実現するのに課題が生じる可能性があります。

次の HTML コードを考えてみましょう:

<div class="container">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
</div>

そしてそれに付随するCSS:

.container {
    display: inline-flex;
    flex-flow: column wrap;
    align-content: flex-start;
    height: 100%;
}

目的は、ラップされた要素を収容するためにコンテナーを水平方向に拡張し、画像の列を含むグリッド状のレイアウトを提供することです。ただし、提供された jsFiddle で経験するかもしれないように、ブラウザーの動作は異なります。

• IE 11: コンテナーは水平方向に展開し、要素の各列をラップします。
• Firefox: 要素の最初の列のみが折り返され、残りは折り返されます。
• Chrome: コンテナは常に親の幅を満たすように伸縮します。

この矛盾に対処し、IE 11 で観察される動作を実現するには、次のようにします。次の解決策を実装します。

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

このアプローチでは、縦書きモードの行フレックス コンテナーを利用します。ブロックとインラインの方向を入れ替えることにより、フレックス項目は強制的に垂直方向に流れるようになります。個々のフレックス項目内の書き込みモードは水平にリセットされます。その結果、コンテナーはラップされたコンテンツに合わせて水平に拡張され、IE 11 で観察された動作を模倣します。

以上がブラウザ間でラップされた Flex アイテムの一貫した水平展開を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。