Home  >  Article  >  Web Front-end  >  Why Don\'t Flex Items Shrink to Fit Three Per Row with Margins and `border-box` Sizing?

Why Don\'t Flex Items Shrink to Fit Three Per Row with Margins and `border-box` Sizing?

DDD
DDDOriginal
2024-11-02 18:51:31314browse

Why Don't Flex Items Shrink to Fit Three Per Row with Margins and `border-box` Sizing?

Flex Items Disregarding Margins and Border-Box Sizing

In flexbox, by setting flex: 1 1 33.33% and margin: 10px on flex items, one might expect three boxes per row. However, with flex-wrap: wrap, the boxes do not shrink to fit three per row.

The reason lies in the nature of box-sizing: border-box. While this property includes padding and borders in the width and height calculations, it excludes margins. Margins are calculated separately, and by default, flex items have flex-shrink: 1, allowing them to shrink in order to fit the container.

To resolve this issue, one can override the default behavior by setting flex-shrink: 0. This prevents the flex items from shrinking into the margins.

Another solution is to adjust the flex-basis value while keeping flex-grow: 1. Since there is no need for flex-basis to enforce a wrap due to flex-grow consumption of free space, one can reduce the value to accommodate the margins. By setting flex: 1 1 26% and margin: 10px, for example, the flex items now fit as expected.

The above is the detailed content of Why Don\'t Flex Items Shrink to Fit Three Per Row with Margins and `border-box` Sizing?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn