「box-sizing: border-box」を使用すると、Flex アイテムがマージンを無視するのはなぜですか?

ボックス サイズ設定でマージンを無視するフレックス アイテム: border-box

フレックスボックスは、マージンとボックス サイズに関しては注意が必要な場合があります。デフォルトでは、box-sizing: border-box を使用する場合でも、マージンはフレックス項目のサイズの計算に含まれません。

ボックス モデルについて

ボックス モデルは、要素の寸法とレイアウトを定義する CSS の概念です。これは 4 つのセクションで構成されます:

• コンテンツ ボックス: 要素の実際のコンテンツのサイズ。
• パディング: 境界線内の透明なスペース。
• 境界線:要素の周囲に表示される線。
• マージン: 境界線の外側の透明なスペース。

box-sizing

box-sizing プロパティは決定します。パディングとボーダーが要素全体のサイズにどのように計算されるか。可能な値は 2 つあります。

• content-box (デフォルト): パディングと境界線がコンテンツ ボックスに追加されます。
• border-box: パディングと境界線が要素の中に含まれます。 size.

フレックスボックスのプロパティ

フレックスボックスでは、次のプロパティはフレックス項目のレイアウトに関連します:

• flex-拡張: 空き領域がある場合にアイテムが占有する追加スペースの量を指定します。
• flex-shrink: コンテナー内に収まるようにアイテムが縮小する必要がある量を指定します。
• flex-basis: flex-grow または flex-shrink を適用する前に項目の理想的なサイズを定義します。

解決策

Flex 項目がマージンを尊重するようにするには、 box-sizing: border-box が使用されます。次の点を考慮してください:

• フレックス項目の縮小を防ぐには、flex-shrink: 0 を指定します。
• flex-basis 値を調整します。コンテンツのサイズと余白の両方を考慮します。

たとえば、コード内では次のようになります。

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

フレックスベースを調整することで、両方に十分なスペースが確保されるようにします。コンテンツと余白。

以上が「box-sizing: border-box」を使用すると、Flex アイテムがマージンを無視するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。