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

コンテナの高さを満たすように 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 サイトの他の関連記事を参照してください。