パーセンテージ パディングを使用するとフレックス項目が折り返されるのはなぜですか?

パーセンテージ パディングが適用されるとフレックス項目が分割されるのはなぜですか?

フレックス項目である要素には、いくつかの非フレックス

が含まれます。要素。パーセントパディングが

に適用される場合、要素、

コンテナは複数の行に分かれています。ただし、固定パディングが使用されている場合はこの限りではありません。

説明

パーセンテージ パディングが使用される場合、それは含まれるブロックの幅に相対的です。この場合、<ウル>。この問題は、コンテナの幅が決定される前にパディングの割合を解決できないという事実から発生します。

固定パディングがない場合、ブラウザはコンテンツに基づいて

の幅を計算します。その後、パーセンテージ パディングが適用され、すべての
• に収まらなくなる幅の広いコンテナが作成されます。

  li {
    display: inline-block;
    padding: 0 5%; /* Percentage padding */
    border: 1px solid black;
  }
  
  header {
    display: flex;
  }
  
  ul {
    border:1px solid red;
  }

  例
  この動作をよりわかりやすく説明するには、次のコードを考えてみましょう。

  console.log(document.querySelector('ul').offsetWidth);

  コンソールで次の JavaScript を実行すると、
  の幅を確認できます。パディングが適用された後:<🎜><🎜><🎜>これは
  の幅を出力します。パーセンテージ パディングが適用された後。

  以上がパーセンテージ パディングを使用するとフレックス項目が折り返されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。