固定の高さを設定せずに、フレキシブルな子をストレッチしてフレックスボックスのコンテナの高さを満たすようにするにはどうすればよいですか?

コンテナの高さを満たすようにフレキシブルな子をストレッチする

Flexbox を使用する場合、高さプロパティの設定の影響を理解することが重要です。従来のレイアウトとは異なり、Flexbox は高さを異なる方法で処理します。

問題:

提供された例では、親の高さ全体を満たすように黄色の子 div を引き伸ばすことが目標です。親の固定高さを設定せずに、コンテナーを作成します。親の高さは、青い子 div のテキスト内容に基づいて調整する必要があります。

間違い:

通常、黄色の div に高さを 100% に設定しようとします。この効果を達成するために子供。ただし、Flexbox では、このアプローチは失敗することがよくあります。

説明:

Flexbox で高さを 100% 使用する場合、親要素 (または、次の場合は兄弟)行方向) では、定義された高さが必要ですが、特に動的コンテンツに依存する場合、常に望ましい、または可能であるとは限りません。さらに、同じコンテナ内の複数の子で height: 100% を指定すると、予期しない結果が生じる可能性があります。

解決策:

解決策は驚くほど簡単です: height: 100% を削除します。黄色い子から。デフォルトでは、行方向のフレックス項目は、align-items プロパティに従って垂直方向に引き伸ばされます。デフォルト値はストレッチであるため、黄色の子はコンテナの高さを自動的に埋めます。

コード スニペット:

<code class="html"><div style='display: flex'>
  <div style='background-color: yellow; width: 20px'></div>
  <div style='background-color: blue'>
    some<br/> cool<br/> text
  </div>
</div></code>

高さを 100% 削除すると、黄色の子は、親の動的な高さに影響を与えることなく、青色の子コンテナと親コンテナの高さに一致するように引き伸ばされるようになりました。このソリューションは、Flexbox の固有のメカニズムを活用して、望ましい結果を実現します。

以上が固定の高さを設定せずに、フレキシブルな子をストレッチしてフレックスボックスのコンテナの高さを満たすようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。