箱子之間的Flexbox邊距

Question

我知道flexbox之間的邊距可以自動設置，這要歸功於align-content屬性，但我需要它是px中設置的固定邊距。我正在尋找類似於column-gap多列的東西。

這是我要做的：與4,5等於

這裏的空間之間1,2,3，讓我們說30像素。任何想法？

Answer 1

解決方案可能是使用容器邊緣和負邊距（這需要額外的包裝）。

演示：http://jsbin.com/gozup/1/edit?html,css,output

HTML

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

CSS

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