検索

ホームページ  >  に質問  >  本文

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

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

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

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

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


リーリー リーリー


P粉186897465P粉186897465495日前606

全員に返信(2)返信します

  • P粉518799557

    P粉5187995572023-07-24 12:40:25

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

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

    返事
    0
  • P粉378890106

    P粉3788901062023-07-24 12:02:22

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

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

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

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

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

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

    返事
    0
  • キャンセル返事