Flexbox の子が異なる高さの利用可能なスペースを利用できるようにするにはどうすればよいですか?

Flexbox の子が高さの異なる利用可能なスペースを確実に利用できるようにする

質問:

2 列の Flexbox レイアウトでは、どのようにすればよいですか?最も高い要素と同じ高さではなく、アクセス可能な領域全体を埋めるためにさまざまなサイズの要素を分散させることはできますか? element?

Context:

フレックスボックスの flex-wrap プロパティを使用すると、要素を複数の行にラップできます。ただし、デフォルトでは、行内のすべての要素は、その行内の最も高い要素と同じ高さになる傾向があります。要素の自然な高さを維持したい場合、これは望ましくない可能性があります。

例:

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

回答:

Flexbox は設計上、行は上記のように動作します。 Flexbox は、行要素が隣接する行のスペースに拡張できるメーソンリー スタイルのレイアウトを模倣することを目的としたものではありません。 align-items を使用して要素の高さを調整するオプションは限られています:

代わりに、列の方向を使用するか、複数列モジュールを使用してカスタマイズ オプションを検討することを検討してください。

以上がFlexbox の子が異なる高さの利用可能なスペースを利用できるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。