flexbox에서 여백 축소하기

일반적으로 CSS에서는 부모와 그 마지막 자식이 여백을 가질 때 여백이 축소되어 단일 여백이 생성됩니다. 예 : 20 픽셀의 여백이 모두 article과 main 태그에 지정된 경우에도 flexbox에서 여백 축소하기

당신이 볼 수 있듯이

article { 
 
    margin-bottom: 20px 
 
} 
 

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

 
footer { 
 
    background: skyblue; 
 
}

<div id="container"> 
 
    <main> 
 
    <article> 
 
     Item 1 
 
    </article> 
 
    <article> 
 
     Item 2 
 
    </article> 
 
    </main> 
 
    <footer>Footer</footer> 
 
</div>

는, 당신은 마지막 기사 및 바닥 글 사이에 20 픽셀의 마진을 얻을.

그러나 flexbox를 사용하면 마지막 기사와 바닥 글 사이에 40px 여백이 생깁니다. 기사에서 전체 20px 여백까지, 나머지 20px는 기본에서 바닥 글까지입니다.

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

 
article { 
 
    margin-bottom: 20px 
 
} 
 

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

 
footer { 
 
    background: skyblue; 
 
}

<div id="container"> 
 
    <main> 
 
    <article> 
 
     Item 1 
 
    </article> 
 
    <article> 
 
     Item 2 
 
    </article> 
 
    </main> 
 
    <footer>Footer</footer> 
 
</div>

인 flexbox 마진이 비 인 flexbox 것들과 동일한 방식으로 작동 할 수있는 방법이 있나요 ?

출처

2017-05-10 Coffee Bite

여백 붕괴는 block formatting context의 기능입니다.

flex formatting context에는 여백이 없습니다.

3. Flex Containers: the flex and inline-flexdisplay values

플렉스 컨테이너
는 내용에 대한 새로운 플렉스 서식 환경을 설정합니다. 블록 레이아웃 대신 플렉스 레이아웃이 사용된다는 점을 제외하고는 블록 서식 지정 컨텍스트 설정, 과 동일합니다. 예를 들어, 플롯은 플렉스 컨테이너에 침입하지 않으며 플렉스 컨테이너의 여백은 내용의 여백과 함께 축소되지 않습니다.

출처

2017-05-10 02:57:52

nnnnnooooooooooooooo이 말을하지 마십시오! 모듈 사이에 여분의 공간을 없애려면 어떻게해야합니까? –

@TomRoggero 아마도 해당 내용에 대한 래퍼를 추가하여 블록 서식 지정 컨텍스트에서 작업 할 수 있습니까? 래퍼는 플렉스 포맷 컨텍스트에 존재하지만 그 컨텐트에는 존재하지 않는다. 그러나 래핑은 좋은, 좋은 의미 론적 마크 업을 해치는 경향이 있습니다. –

flexbox에서 여백 축소하기

답변

관련 문제