「ボックスのサイズ設定」は、パディングを使用したフレックスボックスの縮小係数の計算にどのような影響を与えますか?

パディングとボーダーボックスを使用したフレックスボックスの縮小率

フレックスボックスは、利用可能なスペースに基づいてコンテナ内の項目のサイズを動的に調整します。 flex-shrink プロパティは、コンテナーが小さすぎてすべてのコンテンツを収容できない場合にアイテムがどのように縮小するかを制御します。

フレックス アイテムにパディングが適用される場合、外側の幅にはパディングとコンテンツの両方が含まれ、内側の幅にはパディングとコンテンツの両方が含まれます。コンテンツ自体のみが含まれます。ボックス サイズ プロパティは、フレックス計算で使用される幅を決定します。

パディングなし

スケーリングされたフレックス縮小係数を計算する式 (内部フレックス ベース サイズにフレックスを掛けたもの)縮小率) は変わりません:

:nth-child(1)  2 * 300 = 600
:nth-child(2)  1 * 200 = 200
:nth-child(3)  2 * 100 = 200

TOTAL = 1000

合計の負の空きスペースが -200px の場合、縮小率とその結果の内側の幅は次のとおりです。

:nth-child(1)  600 / 1000 = .6
:nth-child(1)  .6 * -200px = -120px (resulting inner width: 180px)
:nth-child(2)  200 / 1000 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 160px)
:nth-child(3)  200 / 1000 = .2
:nth-child(3)  .2 * -200px =  -40px (resulting inner width:  60px)

パディングあり

パディングを追加すると、コンテンツに使用できるスペースが減少し、内側の幅が異なります。

なしボーダーボックス

収縮率は、パディングを含まないインナーフレックスベースのサイズに基づいて計算されます。結果の内側の幅は次のようになります:

:nth-child(1)  2 * 280 = 560
:nth-child(2)  1 * 180 = 180
:nth-child(3)  2 * 80 = 160

TOTAL = 900

-260px の負の空きスペースでは、縮小率と内側の幅は次のようになります:

:nth-child(1)  560 / 900 = .622
:nth-child(1)  .622 * -260px = -162px (resulting inner width: 118px)
:nth-child(2)  180 / 900 = .2
:nth-child(2)  .2 * -260px =  -52px (resulting inner width: 128px)
:nth-child(3)  160 / 900 = .178
:nth-child(3)  .178 * -260px =  -46px (resulting inner width: 34px)

ボーダーボックスあり

box-sizing: border-box が適用される場合、フレックス ベース サイズにはコンテンツとパディングの両方が含まれます。縮小率は、外側のフレックス ベース サイズを使用して計算されます。これは、指定されたフレックス プロパティに使用可能なスペースを乗算したものです。

:nth-child(1)  2 * 320 = 640
:nth-child(2)  1 * 220 = 220
:nth-child(3)  2 * 120 = 240

TOTAL = 1100

負の空きスペースが -200px の場合、縮小率と内側の幅は次のようになります。

:nth-child(1)  640 / 1100 = .582
:nth-child(1)  .582 * -200px = -116px (resulting inner width: 204px)
:nth-child(2)  220 / 1100 = .2
:nth-child(2)  .2 * -200px =  -40px (resulting inner width: 180px)
:nth-child(3)  240 / 1100 = .218
:nth-child(3)  .218 * -200px =  -44px (resulting inner width: 76px)

以上が「ボックスのサイズ設定」は、パディングを使用したフレックスボックスの縮小係数の計算にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。