ブラウザ間で一貫した水平方向に拡張する Flexbox コンテナの動作を実現するにはどうすればよいですか?

水平方向に展開する Flexbox コンテナ

問題

Flexbox では、ラップされたコンテンツを含むコンテナの動作がブラウザによって異なります。 IE 11 はコンテナを水平に引き伸ばして要素をラップすることで望ましい動作を示しますが、Firefox と Chrome では矛盾が見られます。

解決策

ブラウザには列フレックス コンテナの完全な実装がありませんが、書き込みモードは十分にサポートされています。縦書きモードで行フレックス コンテナーを利用すると、コンテナーのインライン方向がブロック方向と入れ替わります。フレックス アイテムは垂直方向に流れ、フレックス アイテム内で横書きモードを復元できます。

サンプル コード

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

<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

このアプローチは、コンテナーが水平方向に伸びることを保証することにより、IE 11 の動作を模倣します。 Firefox と Chrome でラップされたコンテンツを収容するため。

以上がブラウザ間で一貫した水平方向に拡張する Flexbox コンテナの動作を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。