Çöken marjı

Question

Ben esnek-sarma ve esnek-büyümesine kullanarak uzatmak mümkün elemanları ile flexbox'a üzerinden aşağıdaki düzenleme:

her öğe her tarafta bir marj var. Bu, öğeleri birbirinden ayırmaktır, ancak yan etki, tüm bloğun çökmesini istediğim kenar boşluklarıdır. nth-child(-n+3) { margin-top: 0; } gibi kurallarla yapılabilir, ancak kapsayıcı boyutu değişebileceğinden satır başına herhangi bir sayıda öğe ve herhangi bir sayıda satır olabilir. Bu yüzden, flex-box'ın bu gibi bir kurulumda dış kenar boşluklarını daraltmak için herhangi bir yolu olup olmadığını merak ediyorum.

JSBin

HTML bir konteynerin içinde sadece 6 ürün olduğunu.

aşağıdaki

CSS (Sass) gibi:

.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

Bir kesmek biraz, ama kenarlar boyunca öğelerinin marjlarını iptal etmek esnek konteyner üzerinde olumsuz bir marj ekleyebilir ve daha sonra "arka plan" stilini bir üst sarmalayıcı elemanına taşıyın.

Updated JSBin

Güncelleme CSS (SUKDÖ): herkes saf FlexBox çözüm önermek sürece bir sarıcı, bunun için tek çözüm olabilir gibi

.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