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

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

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

この問題を解決するには、flex-shrink: 1 を設定することでデフォルトの動作をオーバーライドできます。これにより、flex 項目がマージンに縮小するのを防ぎます。

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