フレックスシュリンク係数はボーダーボックスのサイズ設定でパディングとどのように相互作用しますか?

パディングとボーダーボックスのフレックスシュリンク係数はどのように考慮されますか?

仕様で説明されているように、フレックスボックスのシュリンク係数の計算には、それぞれのシュリンク係数を乗算する必要があります。フレックス ベース サイズによってアイテムを調整し、その結果、スケールされた縮小率が得られます。これらのスケーリングされた係数は、各項目に適用される負の空き領域の割合を決定するために使用されます。

Content-Box vs Border-Box

パディングが有効な場合導入された場合、フレックス ベースのサイズはボックス サイズの値に依存します。コンテンツ ボックスの場合、パディングは外側の幅に追加され、フレックス ベース サイズとして使用される内側のサイズが維持されます。その結果、収縮の計算はパディングなしのシナリオと同じになります。

ただし、ボックス サイズ設定がボーダー ボックスに設定されている場合、指定されたフレックス ベース サイズはパディングを含む外側の幅になります。内側のフレックス ベースのサイズは、ボーダーとパディングの幅を減算して計算されます。内部フレックス ベース サイズのこの変更は、スケーリングされた収縮係数の計算、そして最終的にはフレックス項目の収縮動作に影響します。

ボーダー ボックスを使用した収縮計算

パディングとボックス サイズを border-box に設定した状況:

• Outerフレックス ベース サイズ: [360px, 220px, 120px]
• 内部フレックス ベース サイズ: [320px, 200px, 100px]
• パディング: 両側 20 ピクセル
• 負の空き領域: -200px

スケーリングされた縮小率の計算:

• item1: (320px 2) / [(320px 2) (200px 1) ) (100px 2)] = 0.64
• item2: (200px 1) / [(320px 2) (200px 1) (100px 2)] = 0.24
• item3: (100px 2) / [(320px 2) (200px 1) (100px 2)] = 0.12

最後に、スケーリングされた縮小係数を負の空き領域に適用します。

• item1: 0.64 * (-200px) = -128px
• item2: 0.24 * (-200px) = -48px
• item3: 0.12 * (-200px) = -24px

調整済みインナーとアウターサイズ

外側のフレックス ベース サイズを考慮して計算されたサイズを調整します:

• item1: Inner: 320px - 128px = 192px;外側: 192px 2*20px = 232px
• item2: 内側: 200px - 48px = 152px;外側: 152px 2*20px = 192px
• item3: 内側: 100px - 24px = 76px;外側: 76px 2*20px = 116px

これは、フレックス縮小係数とボーダーボックス サイズの考慮事項に基づいて収縮がどのように分散されるかを示しています。パディングは外側の幅に再度追加されるため、コンテンツ ボックスのシナリオと比較して計算されるサイズが異なります。

以上がフレックスシュリンク係数はボーダーボックスのサイズ設定でパディングとどのように相互作用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。