ホームページ  >  記事  >  ウェブフロントエンド  >  私の Flex Child がコンテナの高さを満たさないのはなぜですか?

私の Flex Child がコンテナの高さを満たさないのはなぜですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-30 21:12:46231ブラウズ

Why Does My Flex Child Not Fill the Container Height?

コンテナの高さを満たすように Flex の子を引き伸ばす方法

Flexbox を使用する場合、子要素がコンテナの高さいっぱいまで伸びません。これは、高さ: 100% プロパティの誤った使用が原因であることがよくあります。

フレックスボックスでは、高さ: 100% プロパティは次の理由で問題になる可能性があります。

  • 親要素には修正が必要です。これは、Flexbox の原則に反します。
  • 複数の子が存在する場合、1 つの子に height: 100% を使用すると、他の子は無視されます。

解決策は、 height: 100% プロパティであり、Flexbox のデフォルトの動作に依存します。デフォルトでは、行方向の flex アイテム (一般的なレイアウト) は、プロパティ align-items:stretch を使用して垂直方向に整列します。これは、子要素がコンテナの利用可能な高さを満たすように自動的に引き伸ばされることを意味します。

高さを指定しない正しい使用法を示す例は次のとおりです: 100%:

<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>

この例ではの場合、青い子のテキストの高さに関係なく、黄色の子はコンテナの高さを満たすように引き伸ばされます。これは、デフォルトの align-items:stretch 値により、flex 項目が垂直方向に引き伸ばされて利用可能なスペースを占有することが保証されるためです。

以上が私の Flex Child がコンテナの高さを満たさないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。