ホームページ > 記事 > ウェブフロントエンド > フレックスラップがボックスサイズ設定: ボーダーボックスとマージンで機能しないのはなぜですか?
背景:
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 サイトの他の関連記事を参照してください。