Elementos flexibles sin tener en cuenta los márgenes y el tamaño del cuadro de borde

En flexbox, configurando flex: 1 1 33,33% y margen: 10px en flex artículos, uno podría esperar tres cajas por fila. Sin embargo, con flex-wrap: wrap, las cajas no se reducen para caber tres por fila.

La razón radica en la naturaleza del tamaño de la caja: border-box. Si bien esta propiedad incluye relleno y bordes en los cálculos de ancho y alto, excluye los márgenes. Los márgenes se calculan por separado y, de forma predeterminada, los elementos flexibles tienen flex-shrink: 1, lo que les permite reducirse para adaptarse al contenedor.

Para resolver este problema, se puede anular el comportamiento predeterminado configurando flex- encoger: 0. Esto evita que los elementos flexibles se reduzcan hacia los márgenes.

Otra solución es ajustar el valor de base flexible mientras se mantiene flex-grow: 1. Dado que no hay necesidad de que se aplique flex-basis En resumen, debido al consumo de espacio libre de crecimiento flexible, se puede reducir el valor para adaptarse a los márgenes. Al configurar flex: 1 1 26% y margin: 10px, por ejemplo, los elementos flexibles ahora se ajustan como se esperaba.