フレックスラップがボックスサイズ設定: ボーダーボックスとマージンで機能しないのはなぜですか?

Flexbox 項目の余白とボックスのサイズ設定について

背景:

Flexbox は強力なレイアウト モジュールであり、要素のサイズ設定と分布。一方、box-sizing プロパティは、パディングとボーダーが要素のサイズにどのような影響を与えるかを決定します。

このシナリオでは、box-sizing: border- を使用しても、フレックス項目が 3 列に収まるように縮小することを期待していました。箱。ただし、フレックス ラップが期待どおりに機能しないという問題が発生しました。

説明:

box-sizing: border-box には次の内容が含まれることに注意することが重要です。幅と高さの計算にはパディングとボーダーが含まれますが、マージンは含まれません。マージンは常に個別に計算されます。

デフォルトのフレックス コンテナ設定:

フレックス コンテナの初期設定は flex-shrink: 1 です。これは、フレックス アイテムが次まで縮小できることを意味します。コンテナ内に収まり、指定された幅、高さ、またはフレックスベースの値をオーバーライドする可能性があります。

解決策:

希望のレイアウトを実現するには、フレックスベースの値を調整できます。基本プロパティを、折り返しを強制しながらマージンに対応する値に設定します。これにより、flex-grow はマージン スペースに侵入することなく、残りのスペースを均等に分配できるようになります。

調整された CSS:

<code class="css">* {
  box-sizing: border-box;
}

.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>

結論:

フレックスボックス項目の余白とボックス サイズの相互作用を理解することで、レイアウト内の要素のサイズと配置を効果的に制御できます。

以上がフレックスラップがボックスサイズ設定: ボーダーボックスとマージンで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。