ブラウザ全体でラップされたコンテンツを使用して Flexbox コンテナを水平方向に拡張するにはどうすればよいですか?

ラップされたコンテンツを使用して Flexbox コンテナを水平に展開する

Flexbox は、柔軟なレイアウトを作成するための強力なソリューションを提供します。ただし、ブラウザの動作に矛盾が生じ、予期しない結果が生じる可能性があります。このような問題の 1 つは、ラップされたコンテンツとともに flexbox コンテナを水平方向に展開しようとすると発生します。

次の HTML および CSS コードを考えてみましょう。

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

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

このコードは、上から下に流れる画像のグリッド。下に到達すると折り返されます。ただし、ブラウザの動作は異なります。

• IE 11: コンテナは、ラップされた要素を正常に収容するために展開されます。
• Firefox: 最初の要素のみをラップします。
• Chrome: コンテナは常に親の幅を埋めます。

他のブラウザで望ましい動作を実現するには、次のことを考慮してください。縦書きモードで行フレックス コンテナを利用します。

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

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

ブロック方向とインライン方向を交換することにより、フレックス アイテムは垂直方向に流れます。フレックス項目内で横書きモードを復元すると、解決策は完了です。この手法を使用すると、ブラウザ間で一貫した方法で列ラップの内容に合わせて水平方向に展開するフレックスボックス コンテナーを作成できます。

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