`box-sizing: border-box`를 사용할 때 내 Flex 항목이 여백을 고려하지 않는 이유는 무엇입니까?

여백 및 상자 크기를 고려하지 않는 Flex 항목: border-box

상자 크기 조정의 개념과 이것이 Flex 항목의 동작에 어떤 영향을 미치는지 이해하는 것이 CSS Flexbox를 사용합니다. 기본적으로 상자 크기 조정 속성은 "content-box"로 설정됩니다. 이는 패딩과 테두리가 콘텐츠 너비와 높이에 추가됨을 의미합니다. 그러나 상자 크기가 "border-box"로 설정된 경우 여백은 너비 또는 높이 계산에 고려되지 않습니다.

이 경우 flex 항목에서는 여백 및 상자 크기가 다음으로 설정된 문제가 발생합니다. "테두리 상자"의 경우 항목 너비를 계산할 때 여백을 무시하는 것이 원인입니다. 플렉스 컨테이너의 초기 설정은 flex-shrink: 1입니다. 이는 플렉스 항목이 컨테이너 내에 맞도록 크기를 줄일 수 있음을 의미합니다. 그러나 flex-shrink를 비활성화하지 않는 한 이것만으로는 지정된 너비, 높이 또는 flex-basis를 준수하기에는 충분하지 않습니다.

해결 방법

문제를 해결하려면 box-sizing: border-box를 사용하는 동안 Flex 항목이 여백을 준수하는지 확인하십시오. 다음 조정을 고려하십시오.

바꾸기:

<code class="css">flex: 1 1 33.33%;
margin: 10px;</code>

다음으로:

<code class="css">flex: 1 0 26%;
margin: 10px;</code>

flex-basis를 33.33%에서 26%로 줄이면 여백을 고려하면서 강제로 래핑할 수 있을 만큼 작아집니다. 이러한 조정을 통해 플렉스 항목이 여백 공간에 침입하지 않고 지정된 너비를 준수할 수 있습니다. 그리고 여백.

위 내용은 `box-sizing: border-box`를 사용할 때 내 Flex 항목이 여백을 고려하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!