この問題は非常に奇妙で、通常のコンテナとフレキシブル ボックスでは動作が異なります。
最初の子要素のフォント サイズを変更します:
この問題はどうすれば解決できますか?フレックスボックスが動かないようにしたいです。
おそらく、これは最初の子要素のフォント サイズを変更する場合にのみ発生します。 2 番目の子要素のフォント サイズの変更は重要ではありません...なぜでしょうか?
P粉5187995572023-07-24 12:40:25
最初のテキストのフォント サイズが 50 ピクセル、2 番目のテキストのフォント サイズが 0 ピクセルで、フォント サイズを切り替えたいとします。この時点で、コンテンツの高さは 50px です。アニメーションの途中で、両方のテキストのフォント サイズが 25 ピクセルに変更されるため、コンテンツの高さも 25 ピクセルに変更されます。アニメーションの最後では、フォント サイズが 50 ピクセルと 0 ピクセルになるため、コンテンツの高さは 50 ピクセルになります。
div の高さはコンテンツの高さに応じて調整されます。
P粉3788901062023-07-24 12:02:22
同じ質問で複数の質問をしないでください。
「通常の」(つまり、ブロックレベル) コンテナーに関する最初の質問が繰り返されました。 タグを使用して段落を大きくする問題については、詳しく説明されています。
フレックスボックス コンテナの場合、これはフレックスコンテナがベースラインを決定する方法によって決まります。関連する仕様を以下に示します。
フレックス項目のデフォルトの位置合わせは「ストレッチ」です。これは、フレックス項目がベースライン位置合わせに参加しないことを意味するため、最初の点は適用されません。
2 番目の点が適用されます。つまり、各フレックス コンテナーの最初のフレックス項目が、個々のフレックス コンテナーを調整するためのベースラインを提供します。
この問題に対処する標準的な方法は、inline-flex または inline-block コンテナー要素にvertical-align:top を設定して、ベースラインから遠ざけることです。