パディングは「border-box」と「content-box」でのフレックスシュリンクの動作にどのような影響を与えますか?

パディングとボーダーボックスのフレックス縮小係数

フレックス縮小係数は、要素がどの程度縮小するかを決定するために使用されます。フレックスコンテナにマイナスのスペースがあります。パディングが要素に適用されると、box-sizing の値に応じて、内部フレックス ベースが影響を受けます。

• Content-box: 内部フレックス ベースには、コンテンツなので、パディングは縮小に使用できるスペースには影響しません。
• Border-box: 内側フレックス ベースにはコンテンツとパディングの両方が含まれるため、パディングによって縮小に使用できるスペースが減ります。

各アイテムのスケーリングされたフレックス シュリンク係数を計算するには、その内部のフレックス ベースにそのフレックス シュリンク係数を乗算します。次に、すべてのスケーリングされたフレックス縮小率の合計に対する、各アイテムのスケーリングされたフレックス縮小率の比率を見つけます。最後に、項目のターゲット サイズをフレックス基準から、比率に比例する負のスペースの一部を引いた値に設定します。

パディングなしの場合、計算は簡単です。

Inner Width = Inner Flex Basis + Ratio * Remaining Free Space

パディングあり、利用可能なスペースが減少するため、残りの空きスペースが変化します。

ボーダーボックスの場合、指定されたフレックス ベースは外側のベース (含む) です。パディング)。内側のベースは、パディング幅を減算して計算されます。スケーリングされたフレックス縮小係数の合計は変更されませんが、比率とターゲット サイズが調整されます。

Inner Width = (Outer Flex Basis - Padding) + Ratio * Remaining Free Space

例:

3 つのアイテムを含むフレックス コンテナーを考えます。 、それぞれ 2 のフレックス縮小係数を持ちます:

• 項目 1: フレックス基準 = 300px、パディング = 0px
• 項目 2: フレックス ベース = 200px、パディング = 0px
• 項目 3: フレックス ベース = 100px、パディング = 0px

シナリオ 1 (いいえパディング):

• 残りの空き領域 = -200px
• スケールされたフレックス縮小係数: 600、200、200
• スケールされたフレックス縮小係数の合計 = 1000
• 比率: 0.6、0.2、0.2
• 内側の幅: 180px、160px、60px

シナリオ 2 (パディング = 10px):

• 残りの空き容量 = -260px
• スケールされたフレックス縮小係数: 560、200、160
• スケールされたフレックス縮小係数の合計 = 920
• 比率: 0.61、0.22、0.17
• 内側の幅: 144px、148px、48px

シナリオ 3 (ボーダーボックス):

• 残りの空き領域 = -200px
• 拡大縮小フレックス収縮率: 636、240、 176
• スケーリングされたフレックス縮小係数の合計 = 1052
• 比率: 0.6、0.23、0.17
• 内幅: 176px、160px、64px

以上がパディングは「border-box」と「content-box」でのフレックスシュリンクの動作にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。