Why Are Flex Items Ignoring Margins and Box-Sizing: A border-box Problem?

Flex Items Not Respecting Margins and Box-Sizing: border-box

In CSS, the box-sizing property determines how an element's width and height are calculated, including any padding or borders. When set to border-box, the element's dimensions include both padding and borders. However, margins are always calculated separately, regardless of the box-sizing property.

When using Flexbox, setting flex to 1 1 33.33% with margin: 10px yields unexpected behavior. Although Flexbox typically distributes available space equally between items, the margins are not accounted for in this scenario. As a result, the expected three items per row are not achieved.

To resolve this issue, the flex-basis property can be adjusted. In the example provided, flex-basis is set to 26%, which is the desired width of each item minus the margin. By ensuring that margin is not factored into flex-basis, Flexbox correctly aligns the items and wraps them as intended.

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

The above is the detailed content of Why Are Flex Items Ignoring Margins and Box-Sizing: A border-box Problem?. For more information, please follow other related articles on the PHP Chinese website!