बक्से के बीच फ्लेक्सबॉक्स मार्जिन

Question

मुझे पता है कि फ्लेक्सबॉक्स के बीच मार्जिन स्वचालित रूप से align-content संपत्ति के लिए धन्यवाद सेट किया जा सकता है, लेकिन मुझे इसे पीएक्स में निर्धारित मार्जिन सेट करने की आवश्यकता है। मैं मल्टी-कॉलम के लिए column-gap जैसा कुछ ढूंढ रहा हूं।

यहाँ मैं क्या करने की जरूरत है:

यहाँ अंतरिक्ष 1,2,3 और 4,5 बराबर है के बीच, के 30px मान लीजिए। कोई उपाय?

Answer 1

मार्जिन का उपयोग करने के लिए एक समाधान हो सकता है, और कंटेनर पर नकारात्मक मार्जिन (जिसके लिए एक अतिरिक्त रैपर की आवश्यकता होती है)।

डेमो:http://jsbin.com/gozup/1/edit?html,css,output

एचटीएमएल

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

सीएसएस

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