Flexbox 여백이 표준 블록 서식 컨텍스트와 다르게 동작하는 이유는 무엇입니까?

Flexbox에서 여백 축소

일반적으로 CSS에서 상위 요소와 마지막 하위 요소에 여백이 있으면 여백이 단일로 축소됩니다. 여유. 그러나 Flexbox에서는 여백이 다르게 동작합니다.

Flexbox에서 여백 축소가 다른 이유

여백 축소는 블록 서식 컨텍스트의 기능으로, Flexbox에서는 사용되지 않습니다. 플렉스 포맷팅 컨텍스트. Flexbox는 내용에 대한 새로운 Flex 형식화 컨텍스트를 설정합니다. 즉, 여백은 블록 형식화 컨텍스트에서와 같은 방식으로 축소되지 않습니다.

Flexbox 여백이 Flexbox가 아닌 여백처럼 작동하도록 만드는 방법

여백 축소는 블록 서식 컨텍스트의 기능이므로 Flexbox 여백이 다음과 같이 정확하게 동작하도록 만드는 것은 불가능합니다. Flexbox가 아닌 것. 그러나 flexbox 컨테이너의 표시 속성을 flex 대신 inline-flex로 설정하면 비슷한 효과를 얻을 수 있습니다. 이렇게 하면 Flexbox 서식 지정 컨텍스트가 생성되지만 인라인 요소로 처리되므로 여백이 예상대로 축소됩니다.

예:

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

article {
  margin-bottom: 20px;
}

main {
  background: pink;
  margin-bottom: 20px;
}

footer {
  background: skyblue;
}

이 경우 마지막 기사와 바닥글 사이의 여백이 축소되어 Flexbox가 아닌 레이아웃과 마찬가지로 여백이 20픽셀이 됩니다.

위 내용은 Flexbox 여백이 표준 블록 서식 컨텍스트와 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!