「box-sizing: border-box」を使用すると、Flex アイテムがマージンを考慮しないのはなぜですか?

マージンとボックス サイズを考慮しないフレックス アイテム: border-box

ボックス サイズの概念と、それがフレックス アイテムの動作にどのような影響を与えるかを理解することは、次の場合に非常に重要です。 CSSフレックスボックスを使用します。デフォルトでは、box-sizing プロパティは「content-box」に設定されています。これは、コンテンツの幅と高さにパディングと境界線が追加されることを意味します。ただし、ボックス サイズ設定が「border-box」に設定されている場合、マージンは幅または高さの計算に考慮されません。

この場合、マージンとボックス サイズ設定が「border-box」に設定されていると、フレックス アイテムで問題が発生します。 「border-box」では、アイテムの幅を計算する際にマージンが無視されることが原因です。フレックス コンテナーの初期設定は flex-shrink: 1 です。これは、フレックス アイテムがコンテナー内に収まるようにサイズを縮小できることを意味します。ただし、これだけでは、フレックスシュリンクが無効になっていない限り、指定された幅、高さ、またはフレックス ベースを確実に遵守するには不十分です。

解決策

問題を解決するにはまた、box-sizing: border-box の使用中にフレックス項目がマージンを尊重するようにするには、次の調整を検討してください:

Replace:

<code class="css">flex: 1 1 33.33%;
margin: 10px;</code>

With:

<code class="css">flex: 1 0 26%;
margin: 10px;</code>

フレックスベースを 33.33% から 26% に下げることにより、マージンを考慮しながらラップを強制できるほど小さくなります。この調整により、フレックス項目がマージンスペースに侵入せず、指定された幅に固着することが保証されます。

以上が「box-sizing: border-box」を使用すると、Flex アイテムがマージンを考慮しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。