여백 및 '테두리 상자' 크기 조정을 사용하여 행당 3개씩 플렉스 항목을 축소하지 않는 이유는 무엇입니까?

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

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

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

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

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

위 내용은 여백 및 '테두리 상자' 크기 조정을 사용하여 행당 3개씩 플렉스 항목을 축소하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!