Lề hộp lề giữa các hộp

Question

Tôi biết lề giữa các hộp có thể được đặt tự động nhờ thuộc tính align-content, nhưng tôi cần nó là lề cố định được đặt trong px. Tôi đang tìm một cái gì đó tương tự như column-gap cho nhiều cột.

Đây là những gì tôi cần phải làm:

Đây không gian giữa 1,2,3 và 4,5 là bằng nhau, chúng ta hãy nói 30px. Bất kỳ ý tưởng?

Answer 1

Một giải pháp có thể là sử dụng lề và lề trái trên vùng chứa (yêu cầu một trình bao bọc bổ sung).

Demo: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; 
}