Kutuların arasındaki esnek kutu kenar boşluğu

Question

Esnek kutular arasındaki kenar boşluklarının, align-content özelliği sayesinde otomatik olarak ayarlanabileceğini biliyorum, ancak px olarak ayarlanan sabit kenar boşluğuna ihtiyacım var. Çok sütunlar için column-gap benzer bir şey arıyorum. İşte

yapmam gerekenler:

İşte

uzay 1,2,3 ve 4,5 arasında ve eşittir, en 30px diyelim. Herhangi bir fikir?

Answer 1

Çözüm, kenar boşluklarını ve kapsayıcıdaki negatif boşlukları (ek bir sarıcı gerektirir) kullanmak olabilir.

Demo:http://jsbin.com/gozup/1/edit?html,css,output

HTML

<wrapper> 
    <container> 
    <column>1</column> 
    </container> 
</wrapper> 

sen baktınız mı

wrapper { 
    overflow: hidden; 
    width: 250px; 
} 
container { 
    display: flex; 
    flex-wrap: wrap; 
    margin: -25px; 
} 
column { 
    flex: 0 1 50px; 
    height: 50px; 
    margin: 25px; 
}