Flexbox の子が利用可能な垂直方向のスペースを確実に占めるようにするにはどうすればよいですか?

フレックスボックスの子が利用可能な垂直方向のスペースを占めるようにする

複数の列を持つフレックスボックス レイアウトを利用する場合、子がさまざまなスペースを占めることが望ましい場合があります。行の最も高い子の高さに制限されるのではなく、利用可能なスペースを最大限に活用するための高さを設定します。

問題への対処

フレックスボックスの行は、アイテムを垂直方向に整列させることで自然に動作します。指定されたスペース内で。ただし、項目が行の高さいっぱいに広がるのを防ぐために、align-items プロパティを使用して垂直方向の配置を制御できます。

解決策

望ましい動作を実現するには、align-items プロパティを flex-start に設定します。

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

これにより、行の垂直方向の配置を維持しながら、子が本来の高さを維持できるようになります。

追加オプション

目的のレイアウトでより複雑な間隔の動作が必要な場合は、列の方向または複数列モジュールを使用して目的の結果を達成することを検討してください。詳細については、https://stackoverflow.com/a/20862961/1652962 の包括的な SO 回答を参照してください。

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