기존 CSS와 Flexbox의 여백 축소는 어떻게 다릅니까?

Flexbox에서 여백 축소

기존 CSS에서는 상위 요소와 마지막 하위 요소 모두 여백이 있는 경우 여백이 단일 여백으로 축소되었습니다. 그러나 Flexbox를 사용하면 이러한 축소 동작이 변경됩니다.

Flexbox에서 요소는 display: flex 속성을 사용하여 Flex 컨테이너 내에서 정렬됩니다. 이는 여백 축소 측면에서 블록 서식 컨텍스트와 다른 가변 서식 컨텍스트를 생성합니다.

블록 서식 컨텍스트에서 여백은 다음과 같이 축소됩니다.

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 20px margin between the last article and footer -->

그러나 flex 형식 지정 컨텍스트, 여백은 축소되지 않습니다:

#container {
  display: flex;
  flex-direction: column;
}

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

footer {
  margin-top: 20px;
}

<!-- Outputs a 40px margin between the last article and footer -->

이러한 동작 차이는 Flexbox의 별도 형식 지정 규칙으로 인해 발생합니다. Flex 컨텍스트에서는 여백이 컨테이너 내의 각 요소에 개별적으로 적용되어 여백이 축소되지 않습니다.

위 내용은 기존 CSS와 Flexbox의 여백 축소는 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!