표준 CSS 레이아웃과 비교하여 Flexbox에서 여백은 어떻게 다르게 동작합니까?

Flexbox에서 여백 축소

CSS에서 인접한 요소의 여백은 일반적으로 단일 여백을 만들기 위해 축소됩니다. 그러나 Flexbox 컨테이너에서는 이 동작이 다릅니다.

문제: Flexbox가 아닌 여백과 Flexbox가 아닌 여백

Flexbox가 아닌 레이아웃을 사용할 때 상위 요소의 여백은 그리고 마지막 자식은 접습니다:

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

그러나 flexbox에서는 컨테이너:

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

article {
  margin-bottom: 20px;
}

main {
  margin-bottom: 20px;
}

여백이 더 이상 무너지지 않아 마지막 기사와 바닥글 사이의 간격이 더 커집니다.

차이점 이해

블록 형식화 컨텍스트에서 여백 축소가 발생합니다. 그러나 Flexbox 컨테이너는 Flex 서식 지정 컨텍스트라는 다른 유형의 컨텍스트를 만듭니다.

CSS Box Model 사양에 따르면

"Flex 컨테이너는 콘텐츠에 대한 새로운 Flex 서식 지정 컨텍스트를 설정합니다. 이는 블록 레이아웃 대신 Flex 레이아웃이 사용된다는 점을 제외하면 블록 서식 컨텍스트를 설정하는 것과 동일합니다."

Flex 서식 컨텍스트에서 여백은 그렇지 않습니다. 내용이 일반 블록 레이아웃과 다르게 처리되기 때문에 축소됩니다. 플로트는 플렉스 컨테이너에 침입하지 않으며 컨테이너의 여백은 하위 요소의 여백과 분리된 상태로 유지됩니다.

위 내용은 표준 CSS 레이아웃과 비교하여 Flexbox에서 여백은 어떻게 다르게 동작합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!