子要素のフォント サイズを変更すると、フレックス コンテナが元の位置からずれるのはなぜですか?

Question

この問題は非常に奇妙で、通常のコンテナとフレキシブル ボックスでは動作が異なります。

最初の子要素のフォント サイズを変更します:

• 普通のコンテナの場合、コンテナの高さが変わるのはなぜですか?
• フレキシブル ボックスの場合、フレキシブル ボックスが一定の距離で上下に移動するのはなぜですか?

この問題はどうすれば解決できますか?フレックスボックスが動かないようにしたいです。

おそらく、これは最初の子要素のフォント サイズを変更する場合にのみ発生します。 2 番目の子要素のフォント サイズの変更は重要ではありません...なぜでしょうか?

リーリー リーリー

Answer 1

最初のテキストのフォント サイズが 50 ピクセル、2 番目のテキストのフォント サイズが 0 ピクセルで、フォント サイズを切り替えたいとします。この時点で、コンテンツの高さは 50px です。アニメーションの途中で、両方のテキストのフォント サイズが 25 ピクセルに変更されるため、コンテンツの高さも 25 ピクセルに変更されます。アニメーションの最後では、フォント サイズが 50 ピクセルと 0 ピクセルになるため、コンテンツの高さは 50 ピクセルになります。

div の高さはコンテンツの高さに応じて調整されます。

Answer 2

同じ質問で複数の質問をしないでください。

「通常の」(つまり、ブロックレベル) コンテナーに関する最初の質問が繰り返されました。 タグを使用して段落を大きくする問題については、詳しく説明されています。

フレックスボックス コンテナの場合、これはフレックスコンテナがベースラインを決定する方法によって決まります。関連する仕様を以下に示します。

フレックス項目のデフォルトの位置合わせは「ストレッチ」です。これは、フレックス項目がベースライン位置合わせに参加しないことを意味するため、最初の点は適用されません。

2 番目の点が適用されます。つまり、各フレックス コンテナーの最初のフレックス項目が、個々のフレックス コンテナーを調整するためのベースラインを提供します。

この問題に対処する標準的な方法は、inline-flex または inline-block コンテナー要素にvertical-align:top を設定して、ベースラインから遠ざけることです。