元の高さを維持しながら、Flexbox の子が利用可能なスペースをすべて占めるようにするにはどうすればよいですか?

Flexbox: 可変高さの子を実現して利用可能なスペースを最大限に活用する

Flexbox は、Web 開発者がレスポンシブなレイアウトを作成できる強力なレイアウト モジュールです。柔軟なレイアウト。一般的な使用例の 1 つは、各列に高さの異なる子要素が含まれる 2 列のレイアウトを作成することです。ただし、デフォルトでは、行内のすべての子の高さは、最も背の高い子の高さになります。

問題:

2 列の Flexbox レイアウトを次のように構成するにはどうすればよいですか?すべての子がその行の最も背の高い子の高さをもつのではなく、さまざまなサイズの子が利用可能なスペースを最大限に利用できるようにしますか?

解決策:

Flexbox はネイティブでは機能しません。前後の行に割り当てられたスペースを行が占有できるようにします。したがって、CSS だけでは、行内のアイテムが利用可能なスペースを埋めるために引き伸ばされるメイソンリーのような動作を再現することはできません。

実装:

align-items プロパティの使用フレックススタートに設定すると、子が伸びるのを防ぎ、元の高さを維持できるようになります。

#container {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

このソリューションは、各セルが元の高さを維持するようにし、最も背の高い子がセル全体にその高さを押し付けることを防ぎます。 row.

代替アプローチ:

あるいは、列方向または複数列モジュールを使用して、高さが可変の列を含むレイアウトを作成することを検討してください。このアプローチにより、列内の項目がその列の高さ全体を占めることができ、目的の効果が得られます。

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