別々の Flex コンテナ内の異なるサイズの見出しを同じ高さにするにはどうすればよいですか?

フレックス項目の同じ高さの子

問題:
すべての .block div の高さを同じにし、.ボトム div は絶対的に一番下に配置されます。これは機能しますが、h2 見出しが長すぎて 2 行に達する場合は、行のすべての h2 見出しを同じ高さにする必要があります。

解決策:

はできません。これは、一般にフレックスボックスまたは CSS を使用して実現します。

フレックスボックスのデフォルトの動作は、フレックス項目を交差軸の高さ全体に引き伸ばすことであり、これは「フレックス」として知られています。同じ高さの柱。」ただし、これはフレックス コンテナの子にのみ適用され、異なるコンテナ内の要素には適用されません。

この場合、h2 見出しは異なるコンテナ内にあるため、高さを等しくする機能は適用されません。さらに、フレックス項目に高さを適用すると、同じ高さの設定が上書きされます。

追加の注意事項:

• 等しい高さの列は、単一のフレックス ラインにのみ適用されます。
• align-self プロパティは align-items をオーバーライドし、同じ高さを解除できます。機能。
• 複数行のフレックス コンテナでは、同じ高さの列は機能しません。
• フレックス方向が列の場合、同じ高さが幅に適用されます。

以上が別々の Flex コンテナ内の異なるサイズの見出しを同じ高さにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。