Flexbox の子が親の高さの 100% を占めるようにするにはどうすればよいですか?

フレックスボックスの子が親の高さの 100% を占めるようにする方法

フレックスボックス内のフレックス項目の垂直方向のスペースを埋めようとする場合、子要素 (この場合は .flex-2-child ) が完全に拡張されないという問題が発生する可能性があります。

この問題を解決するために、さまざまなアプローチが提案されています。一般的な解決策の 1 つは、親要素 .flex-2 の高さを 100% に設定することです。ただし、このアプローチでは、さまざまなブラウザー (Chrome など) 間で不整合やバグが発生する可能性があります。

別のアプローチは、値ストレッチを指定して align-items プロパティを利用することです。 .flex-2 の align-items をストレッチに設定すると、その flex アイテムは親の利用可能な垂直方向のスペースを埋めるように引き伸ばされます。競合を避けるために、子要素の height: 100% の設定を削除する必要があることに注意することが重要です。

.flex-2-child 項目に対してのみ align-self を使用することも、別のオプションです。これにより、親内の他のフレックス項目に影響を与えることなく、目的の子要素を個別に引き伸ばすことができます。

これらの方法を採用することで、Flexbox の子が親の高さの 100% を適切に占め、目的の垂直方向の配置を作成できるようになります。

以上がFlexbox の子が親の高さの 100% を占めるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。