ラップされたコンテンツを収容するために Flexbox コンテナを水平に拡張するにはどうすればよいですか?

Flexbox コンテナを水平方向に拡張する方法

Flexbox では、ページ要素のレイアウトと配置を微妙に制御できます。課題の 1 つは、ラップされたコンテンツを収容するために、フレックスボックス コンテナを水平方向に拡張することにあります。この点に関してブラウザはさまざまな動作を示すため、特定の解決策が必要です。

必要な画像のグリッドを検討してください。

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

列の折り返しを指定しているにもかかわらず、Firefox はコンテナの幅を最初の列の要素に制限します。一方、Chrome はコンテンツに関係なく、親の幅に拡張します。 IE11 の動作を実現するには、別のアプローチが必要です。

書き込みモードの活用

ブラウザは通常、書き込みモードを適切にサポートしています。書き込みモードでは、ブロックとインラインの方向を交換できるため、フレックス項目の垂直方向のフローが可能になります。フレックス項目内では、横書きモードを復元できます。

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

コンテナの書き込みモードをvertical-lrに設定し、flex項目にwriting-mode:horizo​​ntal-tbを適用することで、効果的に実現できます。縦の流れと横の広がり。このソリューションは、ブラウザーの書き込みモードのサポートと連携し、水平方向に展開するフレックスボックス コンテナーの特定の要件に対処します。

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