Flex Wrap이 상자 크기 조정: 테두리 상자 및 여백과 함께 작동하지 않는 이유는 무엇입니까?

Flexbox 항목 여백 및 상자 크기 이해

배경:

Flexbox는 강력한 레이아웃 모듈로, 요소의 크기 조정 및 배포. 반면에 box-sizing 속성은 패딩과 테두리가 요소의 크기에 미치는 영향을 결정합니다.

귀하의 시나리오에서는 box-sizing: border-를 사용하더라도 플렉스 항목이 3개 열에 맞게 줄어들 것으로 예상했습니다. 상자. 그러나 플렉스 랩이 예상대로 작동하지 않는 문제가 발생했습니다.

설명:

box-sizing: border-box에는 다음이 포함된다는 점에 유의하는 것이 중요합니다. 너비/높이 계산 시 패딩 및 테두리는 포함되지만 여백은 포함되지 않습니다. 여백은 항상 별도로 계산됩니다.

기본 Flex 컨테이너 설정:

Flex 컨테이너의 초기 설정은 flex-shrink입니다. 1. 이는 Flex 항목이 다음으로 축소될 수 있음을 의미합니다. 컨테이너 내에 맞도록 하여 지정된 너비, 높이 또는 flex-basis 값을 잠재적으로 재정의할 수 있습니다.

해결책:

원하는 레이아웃을 얻으려면 flex-basis를 조정할 수 있습니다. 기본 속성을 여백을 수용하는 동시에 줄바꿈을 적용하는 값으로 설정합니다. 이렇게 하면 flex-grow가 여백 공간을 침해하지 않고 남은 공간을 균등하게 분배할 수 있습니다.

조정된 CSS:

<code class="css">* {
  box-sizing: border-box;
}

.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>

결론:

Flexbox 항목 여백과 상자 크기 사이의 상호 작용을 이해하면 레이아웃에서 요소 크기와 배치를 효과적으로 제어할 수 있습니다.

위 내용은 Flex Wrap이 상자 크기 조정: 테두리 상자 및 여백과 함께 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!