コンテンツをラップするために Flexbox コンテナを水平に拡張する方法

コンテンツをラップするために Flexbox コンテナを水平方向に拡張する方法?

CSS Flexbox を使用する場合、ブラウザは、特にコンテナのサイズ変更のコンテキストでさまざまな動作を示します。この不一致に対処するために、ラップされたコンテンツを収容できるように flexbox コンテナを水平に拡張する解決策を模索します。

特定のシナリオでは、列レイアウトに配置された複数の div 要素をコンテナに含める必要がある場合があります。目的は、これらの要素が垂直方向に流れ、下に到達すると折り返して、テキストまたは画像の列ができるようにすることです。ただし、ラップされた要素に合わせてコンテナーの水平方向の拡張を制御することは依然として課題です。

目的の動作を実現するには、垂直方向の書き込みモードで行フレックス コンテナーを利用することができます。これにより、インラインとブロックの方向が逆転し、フレックス項目が垂直方向に流れるようになります。その結果、フレックス項目内で整列された書き込みモードが反転され、水平方向の整列が復元されます。

実際的なデモンストレーションについては、次のコード スニペットを検討してください。

.container {
  display: inline-flex;
  writing-mode: vertical-lr; /* Reverses inline and block directions */
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb; /* Restores horizontal alignment */
  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>

この手法を通じてを使用すると、新しいコンテンツが追加されるとコンテナーが動的に水平方向に拡張され、個々の要素が適切にラップされ、配置されるようになります。

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