`flex-shrink` は Padding および `box-sizing: border-box` とどのように相互作用しますか?

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

フレックスボックスのフレックス シュリンク プロパティは、空き領域を分配する必要がある場合に要素のサイズをどのように縮小するかを決定します。フレックスアイテムの中でも。ただし、その動作はパディングの有無とボックス サイズの値によって異なる場合があります。

パディングなしのフレックス シュリンク

パディングがない場合、フレックス シュリンクの計算は簡単です。 。負の空き領域は、フレックス シュリンク値と初期サイズに基づいてフレックス アイテム間で分配されます。

パディング付きフレックス シュリンク

フレックス アイテムにパディングが追加されると、計算がより複雑になります。 。フレックス項目に使用できるスペースは、パディングの総量によって減少します。この削減されたスペースは、スケーリングされたフレックス縮小係数に基づいてアイテム間で分配されます。

ボックス サイズ設定とパディング

ボックス サイズ設定プロパティは、要素のサイズの計算方法に影響します。パッドの使用。 box-sizing が border-box に設定されている場合、指定された幅と高さにはパディングが含まれます。したがって、パディングのある flex アイテムの初期サイズは、パディングがない場合よりも大きくなります。

パディングとボーダー ボックスを使用してフレックス シュリンクの計算を調整しました

パディングとボックス サイズの両方を使用する場合: border -box が存在する場合、フレックスシュリンクの計算はこれらの要因を考慮して調整されます。関係する手順は次のとおりです:

1. 凍結されていないフレックス項目のスケーリングされたフレックス縮小係数を計算します。これには、フレックス シュリンク値に内側のフレックス ベース サイズを乗算することが含まれます。これは、指定されたサイズからパディングとボーダーの幅を差し引いたものです。
2. すべてのフリーズされていないフレックス アイテムのスケーリングされたフレックス シュリンク係数の合計を見つけます。
3. 凍結されていないフレックス項目ごとに、スケーリングされたフレックス縮小係数をすべてのスケーリングされたフレックス項目の合計で割ることにより、その比率を決定します。フレックス縮小係数。
4. 各アイテムのターゲット メイン サイズを、そのフレックス ベース サイズから、その比率に比例する負の空き領域の一部を引いた値に設定します。この割合は、比率に負の空き領域を乗じたものとして計算されます。
5. 各フレックス項目の計算されたサイズを、内側と外側のフレックス ベース サイズとパディングに基づいて調整し、項目の最終的な幅は次のようになります。

結論

フレックスシュリンクがパディングおよびボックスサイズ設定とどのように相互作用するかを理解するフレックスコンテナのレイアウトを制御するために不可欠です。これらの要素を考慮することで、開発者は設計要件を満たす正確かつ柔軟なレイアウトを実現できます。

以上が`flex-shrink` は Padding および `box-sizing: border-box` とどのように相互作用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。