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

box-sizing을 사용하여 여백을 무시하는 Flex 항목: border-box

Flexbox는 여백 및 상자 크기와 관련하여 까다로울 수 있습니다. 기본적으로 box-sizing: border-box를 사용하는 경우에도 플렉스 항목의 크기 계산에는 여백이 포함되지 않습니다.

박스 모델 이해

박스 모델은 요소의 크기와 레이아웃을 정의하는 CSS 개념입니다. 4개의 섹션으로 구성됩니다:

• 콘텐츠 상자: 요소의 실제 콘텐츠 크기.
• 패딩: 테두리 내부의 투명한 공간
• 테두리: 요소 주위에 보이는 선.
• 여백: 테두리 외부의 투명한 공간.

box-sizing

box-sizing 속성에 따라 결정됩니다. 패딩과 테두리가 요소의 전체 크기로 계산되는 방식. 두 가지 가능한 값이 있습니다.

• content-box(기본값): 패딩과 테두리가 콘텐츠 상자에 추가됩니다.
• border-box: 패딩과 테두리가 요소의 size.

Flexbox 속성

Flexbox에서 다음 속성은 Flex 항목의 레이아웃과 관련됩니다.

• flex- 성장: 여유 공간이 있을 때 항목이 차지해야 하는 추가 공간의 양을 지정합니다.
• flex-shrink: 컨테이너에 맞추기 위해 항목이 축소되어야 하는 양을 지정합니다.
• flex-basis: flex-grow 또는 flex-shrink를 적용하기 전에 항목의 이상적인 크기를 정의합니다.

해결책

flex 항목이 여백을 존중하는 동안 box-sizing: border-box가 사용되면 다음을 고려하십시오.

• Flex 항목이 축소되는 것을 방지하려면 flex-shrink: 0을 지정하세요.
• flex-basis 값을 조정하세요. 콘텐츠 크기와 여백을 모두 고려합니다.

예를 들어 코드에서

header>span {
  flex: 1 0 26%; /* Adjusted from 1 1 33.33% */
  margin: 10px;
}

flex-basis를 조정하여 두 가지 모두에 충분한 공간이 있는지 확인합니다. 내용과 여백.

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