親の高さを設定せずにフレックス子をストレッチして親の高さを満たすようにするにはどうすればよいですか?

親の高さを設定せずにコンテナの高さを満たすようにフレックス子をストレッチする

黄色のフレックス子をストレッチしてそのコンテナの高さ全体を埋めようとするとき親コンテナーを使用する場合は、親の高さを設定しないようにすることが重要です。代わりに、親の高さは、青い子のコンテンツに基づいて動的に調整する必要があります。

Flexbox を使用する場合の一般的な落とし穴は、高さ 100% の過剰な使用です。これは他のコンテキストでは必要になることがよくありますが、Flexbox のレイアウトが混乱する可能性があります。

理由 1: 親の高さの依存性

高さを 100% 使用する場合、その親は引き伸ばされる要素には定義された高さも必要ですが、Flexbox ではほとんどの場合必要ありません。これにより、予期しない動作が発生する可能性があります。

理由 2: 兄弟要素の無視

フレックスの子の上または下に兄弟がある場合、height: 100% を使用すると無視されます。

解決策: height: 100% を削除

解決策は簡単です。黄色の flex の子から height: 100% を削除します。これにより、Flexbox のデフォルトの動作が引き継がれるようになります。

Default Flexbox Behavior

水平方向の行に配置された Flex アイテム (デフォルト) の場合、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>

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