マージンと「ボーダーボックス」サイズ設定を使用して、項目を 1 行に 3 つ収まるように縮小しないのはなぜですか?

マージンとボーダーボックスのサイズを無視したフレックス項目

フレックスボックスで、フレックス: 1 1 33.33% およびマージン: 10px をフレックスに設定します。アイテムの場合、1 行に 3 つのボックスが予想される場合があります。ただし、flex-wrap: Wrap を使用すると、ボックスは 1 行に 3 つ収まるように縮小しません。

その理由は、box-sizing: border-box の性質にあります。このプロパティには、幅と高さの計算にパディングと境界線が含まれますが、マージンは含まれません。マージンは個別に計算され、デフォルトでは flex アイテムには flex-shrink: 1 が設定されており、コンテナに合わせて縮小できます。

この問題を解決するには、flex- を設定してデフォルトの動作をオーバーライドできます。これにより、フレックス アイテムがマージンに縮小するのを防ぎます。

別の解決策は、フレックス ベースの値を維持しながら調整することです。 flex-grow: 1. flex-grow は空き領域を消費するため、flex-basis がラップを強制する必要がないため、マージンに対応するために値を減らすことができます。たとえば、flex: 1 1 26% と margin: 10px を設定すると、flex 項目が期待どおりに収まるようになりました。

以上がマージンと「ボーダーボックス」サイズ設定を使用して、項目を 1 行に 3 つ収まるように縮小しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。