Flexbox は、Floated Div が親の高さを 100% 取得しない問題をどのように解決できますか?

Float Div to 100% height of Parent: Flexbox ソリューションの公開

Float Div の高さを 100% に設定しようとしたとき親の高さを超えると、開発者は div が高さ 0px に折りたたまれるという問題によく遭遇します。この課題に対処するために、フレックスボックスは洗練されたソリューションを提供します。

その秘密は、親 div の CSS を次のように変更することにあります。

display: flex;

このプロパティを設定すると、フレックスボックスが有効になります。親要素により、子の柔軟なレイアウトが可能になります。 float div を親の 100% の高さにする特定の使用例では、ブラウザ間の互換性を確保するためにベンダー プレフィックスを含めることが重要です。プレフィックスの組み込みに関するガイダンスについては、css-tricks.com などのリソースを参照してください。

追加の考慮事項:

1. Internet Explorer のサポート: 価値があります。 Internet Explorer 9 より前のバージョンはフレックスボックスをサポートしていないことに注意してください。ブラウザのサポート情報については、caniuse.com を参照してください。
2. 項目の整列: デフォルトでは、flexbox は子要素を垂直方向 (または flex-direction が設定されている場合は水平方向) に整列します。ただし、float div に対して別の垂直方向の配置を希望する場合は、align-self プロパティを利用できます。
3. ライブ デモンストレーション: jsFiddle でこのソリューションのライブ デモンストレーションをご覧ください: https: //jsfiddle.net/bv71tms5/2/

以上がFlexbox は、Floated Div が親の高さを 100% 取得しない問題をどのように解決できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。