Flex 항목이 여백 및 상자 크기를 무시하는 이유: 테두리 상자 문제?

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

CSS에서 상자 크기 조정 속성은 다음을 포함하여 요소의 너비와 높이를 계산하는 방법을 결정합니다. 패딩이나 테두리. border-box로 설정하면 요소의 크기에 패딩과 테두리가 모두 포함됩니다. 그러나 여백은 상자 크기 조정 속성에 관계없이 항상 별도로 계산됩니다.

Flexbox를 사용할 때 flex를 여백: 10px로 1 1 33.33%로 설정하면 예기치 않은 동작이 발생합니다. Flexbox는 일반적으로 사용 가능한 공간을 항목 간에 균등하게 분배하지만 이 시나리오에서는 여백이 고려되지 않습니다. 결과적으로 행당 예상되는 3개 항목이 달성되지 않습니다.

이 문제를 해결하려면 flex-basis 속성을 조정할 수 있습니다. 제공된 예에서 flex-basis는 각 항목의 원하는 너비에서 여백을 뺀 값인 26%로 설정됩니다. 여백이 플렉스 기반으로 고려되지 않도록 함으로써 Flexbox는 항목을 올바르게 정렬하고 의도한 대로 래핑합니다.

<code class="css">.horizontal-layout {
  display: flex;
  width: 400px;
}

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

header#with-border-padding {
  flex-wrap: wrap;
}

header#with-border-padding>span {
  flex: 1 0 26%;                   /* ADJUSTED */
}</code>

위 내용은 Flex 항목이 여백 및 상자 크기를 무시하는 이유: 테두리 상자 문제?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!