摺疊保證金

Question

我通過與柔性包裝和能夠使用Flex長出伸展元素Flexbox的以下安排：

每個項目都有在各方面的餘量。這是爲了將項目彼此分開，但副作用是整個塊有我想要崩潰的餘量。它可以用nth-child(-n+3) { margin-top: 0; }之類的規則完成，但由於容器大小可能不同，每行和任意數量的行可能有任意數量的項目。所以我想知道如果彈性盒有任何方法來摺疊這樣的設置中的外邊距，同時保留項目之間的邊距。

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）：

.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