Why Doesn\'t Flex Wrap Work with Box-Sizing: Border-Box and Margins?

Understanding Flexbox Item Margins and Box Sizing

Background:

Flexbox is a powerful layout module, providing control over the sizing and distribution of elements. The box-sizing property, on the other hand, determines how padding and borders affect the element's dimensions.

In your scenario, you expected flex items to shrink to fit three columns, even with box-sizing: border-box. However, you encountered an issue where the flex wrap did not work as you anticipated.

Explanation:

It's crucial to note that box-sizing: border-box includes padding and borders in the width / height calculation, but not margins. Margins are always calculated separately.

Default Flex Container Settings:

An initial setting for flex containers is flex-shrink: 1. This means that flex items can shrink to fit within the container, potentially overriding specified widths, heights, or flex-basis values.

Solution:

To achieve your desired layout, you can adjust the flex-basis property to a value that accommodates the margins while also enforcing a wrap. This will allow flex-grow to distribute the remaining space evenly, not intruding into the margin space.

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

Conclusion:

By understanding the interplay between flexbox item margins and box-sizing, you can effectively control element sizing and placement in your layouts.

The above is the detailed content of Why Doesn\'t Flex Wrap Work with Box-Sizing: Border-Box and Margins?. For more information, please follow other related articles on the PHP Chinese website!