여백 및 테두리 상자 크기를 무시하는 Flex 항목

Flexbox에서 flex: 1 1 33.33% 및 여백: flex에서 10px 설정 항목의 경우 행당 세 개의 상자를 기대할 수 있습니다. 그러나 flex-wrap:wrap을 사용하면 상자가 행당 3개에 맞게 줄어들지 않습니다.

그 이유는 상자 크기 조정: border-box의 특성에 있습니다. 이 속성에는 너비 및 높이 계산에 패딩과 테두리가 포함되지만 여백은 제외됩니다. 여백은 별도로 계산되며 기본적으로 플렉스 항목에는 flex-shrink: 1이 있어 컨테이너에 맞게 축소할 수 있습니다.

이 문제를 해결하려면 flex-를 설정하여 기본 동작을 재정의할 수 있습니다. shrink: 0. 이렇게 하면 flex 항목이 여백으로 축소되는 것을 방지할 수 있습니다.

또 다른 해결 방법은 flex-grow를 유지하면서 flex-basis 값을 조정하는 것입니다. 1. flex-basis를 적용할 필요가 없기 때문에 여유 공간의 Flex-Grow 소비로 인해 랩을 수행할 경우 여백을 수용하기 위해 값을 줄일 수 있습니다. 예를 들어 flex: 1 1 26% 및 margin: 10px를 설정하면 이제 flex 항목이 예상대로 맞습니다.