Flex アイテムがマージンとボックス サイズを無視するのはなぜですか: ボーダー ボックスの問題ですか?

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

CSS では、ボックス サイズ プロパティによって要素の幅と高さがどのように計算されるかが決まります。パディングまたはボーダー。 border-box に設定すると、要素の寸法にはパディングとボーダーの両方が含まれます。ただし、ボックス サイズ プロパティに関係なく、マージンは常に個別に計算されます。

フレックスボックスを使用する場合、マージン: 10px で flex を 1 1 33.33% に設定すると、予期しない動作が発生します。 Flexbox は通常、使用可能なスペースをアイテム間で均等に分配しますが、このシナリオではマージンは考慮されません。その結果、期待される 1 行あたり 3 つの項目が達成されません。

この問題を解決するには、flex-basis プロパティを調整できます。示されている例では、flex-basis は 26% に設定されています。これは、各項目の希望の幅からマージンを差し引いた値です。マージンがフレックス ベースに考慮されていないことを確認することで、Flexbox はアイテムを正しく配置し、意図したとおりにラップします。

<code class="css">.horizontal-layout {
  display: flex;
  width: 400px;
}

header > span { 
  flex: 1 0 26%;                    /* ADJUSTED */
  margin: 10px;
}

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 0 26%;                   /* ADJUSTED */
}</code>

以上がFlex アイテムがマージンとボックス サイズを無視するのはなぜですか: ボーダー ボックスの問題ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。