Flexbox の「flex-shrink」要素はパディングと「box-sizing」をどのように考慮しますか?

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

フレックスボックスの縮小係数式では、次のようにパディングとボックスのサイズが考慮されます。

ステップ 1: インナーフレックスベースを計算するSize

box-sizing プロパティに基づいてコンテンツ ボックス (innerFlexBasis) のサイズを決定します。

• If box-sizing: content-box、innerFlexBasis = 指定されたフレックス ベース。
• ボックス サイズの場合: border-box、innerFlexBasis = 指定されたフレックス基準 - (padding-left padding-right).

ステップ 2: スケーリングされたフレックス シュリンク係数を計算する

内部フレックス基準に、フリーズされていない各フレックス収縮係数を乗算します。 item:

scaledFlexShrinkFactor = innerFlexBasis * flexShrinkFactor

ステップ 3: スケーリングされたフレックス シュリンク係数の比率を決定する

フリーズされていないすべてのスケーリングされたフレックス シュリンク係数を合計しますアイテム: sumScaledFlexShrinkFactors = ∑ (scaledFlexShrinkFactor)

各スケーリングされたフレックス シュリンク係数の合計に対する比率を求めます: 比率 =scaledFlexShrinkFactor / sumScaledFlexShrinkFactors

ステップ 4: アイテムの内部を計算します。幅

比率と残りの空き領域に比例して各項目の内側の幅を変更します:

innerWidth = innerFlexBasis 比率 * RemainingFreeSpace

ステップ 5:外側の幅を調整

box-sizing: border-box を追加します。内側の幅にパディングして外側の幅を計算します (getComputedStyle によって計算されます)。

以上がFlexbox の「flex-shrink」要素はパディングと「box-sizing」をどのように考慮しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。