무너지고 마진

Question

I가 플렉스 랩 플렉스 성장에를 사용하여 늘릴 수 요소 인 flexbox를 통해 다음과 같은 배열 :

각 항목은 모든면에서 여유가 있습니다. 이것은 서로 항목을 분리하는 것이지만 부작용으로 인해 전체 블록에 축소하려는 마진이 있습니다. nth-child(-n+3) { margin-top: 0; }과 같은 규칙을 사용하여 수행 할 수 있지만 컨테이너 크기가 다를 수 있으므로 행당 개수와 행 수가 제한 될 수 있습니다. 그래서 flex-box가 이런 설정에서 바깥 쪽 여백을 붕괴시킬 수있는 방법이 있는지, 항목들 사이의 여백을 유지하는지 궁금합니다.

JSBin

html로는 컨테이너 내부 단순히 6 항목이다.

다음

CSS는 (사스)이 될 때 :

.container 
    display: flex 
    flex-wrap: wrap 
    background: #eef 
    align-items: stretch 

.item 
    flex-grow: 1 
    margin: 1em 
    border: 1px solid black 
    padding: 1em 
    min-width: 6em 

Answer 1

그것은 해킹의 비트,하지만 당신은 가장자리를 따라 항목 '마진을 취소 할 수있는 플렉스 컨테이너에 부정적인 여백을 추가 할 수 있으며 그런 다음 "배경"스타일을 상위 래퍼 요소로 이동하십시오.

Updated JSBin

업데이트 CSS (SASS) : 사람이 순수 인 flexbox 솔루션을 제안 할 수 있습니다하지 않는 한 래퍼가이 유일한 해결책이 될 수처럼

.wrapper 
    background: #eef 
    border: 1px solid darkgray 

.container 
    display: flex 
    flex-wrap: wrap 
    margin: -1em 

.item 
    flex-grow: 1 
    margin: 1em 
    border: 1px solid black 
    padding: 1em 
    min-width: 6em