パーセントパディングによってフレックスボックスのレイアウトが崩れるのはなぜですか?

パーセンテージ パディングがフレックス項目の動作を壊す理由

フレックスボックス レイアウトは、項目を軸に沿って均等に分散するように設計されています。ただし、フレックス アイテム (フレックス コンテナ内に含まれる非フレックス要素) にパーセンテージ パディングを適用すると、コンテナのレイアウトが乱れる可能性があります。

この例では、フレックス コンテナ (

) に次の内容が含まれています。いくつかの非フレックス項目 (
• )。パーセンテージ パディングが個々の
• に適用される場合、

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

  ログイン後にコピー

  ただし、固定パディングが使用されている場合 (例、padding: 0 30px)、コンテナは 1 行のままです。

  説明:

  パーセンテージ パディングの動作は、関係する計算プロセスによるものです。パディングは、それを含むブロックの幅に応じて決定されます。この幅は最初は不明であり、コンテンツまたは固定幅の値に基づいて計算する必要があります。

  パーセンテージ パディングの場合、幅の計算はパディングが適用された後に行われます。したがって、コンテナーの幅はパディングを考慮して調整され、不正確な計算につながります。これにより、アイテムが不均一に分散され、フレックス コンテナのレイアウトが崩れます。

以上がパーセントパディングによってフレックスボックスのレイアウトが崩れるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。