flexbox: इस एससीएसएस/सीएसएस देखते हुए

Question

के बीच की जगह की न्यूनतम राशि:

div.container { 
    display:flex; 
    flex-flow: row wrap; 
    justify-content:space-between; 
    border: 1px solid blue; 
    div { 
    width: 200px; 
    border: 1px solid gray; 
    display:inline-block; 
    text-align: center; 
    } 
} 

यह लेआउट प्रत्येक पंक्ति बाईं ओर गठबंधन में पहले आइटम, और अंतिम आइटम सही करने के लिए गठबंधन किया, के रूप में आवश्यक है। Here is a codepen illustrating।

ब्राउज़र विंडो के रूप में संकरा किया जाता है, जब तक वे गये, इस समय वे कर रहे हैं एक अतिरिक्त पंक्ति पर फिर से व्यवस्था की स्पर्श वितरित div तत्वों को एक साथ करीब आ जाएगा। दोबारा, प्रत्येक पंक्ति पर पहला div बाईं ओर गठबंधन किया गया है, और बीच के साथ अंतिम संरेखित दाएं।

न्यूनतम अंतर सेट करने का कोई तरीका है ताकि आंतरिक div तत्वों के बीच हमेशा एक अंतर हो।

गद्दी और मार्जिन शायद काम नहीं करेगा, संरेखण

<-- 1st left in row और last right in row --> पकड़ नहीं होगा।

Answer 1

आप आंतरिक divs के बीच की खाई को जरूरत के आयोजन के लिए फ्लेक्स शैली के साथ एक और div जोड़ सकते हैं। और उस अंतर के लिए न्यूनतम चौड़ाई के लिए इस संपत्ति का उपयोग करें (जैसा कि W3Schools.com में उल्लिखित है):

फ्लेक्स: फ्लेक्स-फ्लेक्स-सिकुड़ फ्लेक्स-आधार | ऑटो | प्रारंभिक | उत्तराधिकारी;

जो फ्लेक्स-छोटा है:

फ्लेक्स-हटना: एक नंबर का उल्लेख करने के लिए कितना आइटम लचीला आइटम के बाकी

इतना के सापेक्ष हटना होगा, उदाहरण के लिए आप अंतराल div के लिए यह सीएसएस कोड सेट करें:

flex: 1 0 10px; 

जो बताता है कि अंतराल div में 10px चौड़ाई होगी, और रिलाट बढ़ेगा बाकी लचीली वस्तुओं के लिए ive, लेकिन शर्मिंदा नहीं होगा। इसलिए स्क्रीन की सबसे कम चौड़ाई पर न्यूनतम चौड़ाई 10px होगी।

Answer 2

सीएसएस के नीचे आज़माएं। उम्मीद है की यह मदद करेगा।

div.container { 
    position:absolute; 
    border: 1px solid blue; 
    div { 
    width: 200px; 
    margin:0px; 
    border: 1px solid gray; 
    display: inline-block; 
    text-align: center; 
    } 
} 

Answer 3

पार्टी देर से बिट लेकिन मैं एक ही मुद्दे में भाग गया। जिस तरह से मैंने इसे हल किया है, शायद सभी के लिए काम नहीं करेगा, लेकिन यहां यह उन लोगों के लिए है जो इसका उपयोग कर सकते हैं।

मूल विचार यह है कि आपके पास x का न्यूनतम अंतर है। आप प्रत्येक आइटम के बाएं और दाएं मार्जिन x/2 पर सेट करते हैं ताकि आइटम के बीच की दूरी x (मार्जिन + मार्जिन) हो। फिर आप -x/2 के बाएं और दाएं मार्जिन वाले कंटेनर में सभी आइटम लपेटें। यह प्रत्येक पंक्ति के किनारों पर वस्तुओं पर मार्जिन छुपाएगा।

.box { 
 
    border: 1px solid black; 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    margin: 0 -1em; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    border: 1px solid grey; 
 
    padding: 1em; 
 
    width: 20%; 
 
    margin: 0 1em; 
 
}

<div class="box"> 
 
    <div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    </div> 
 
</div>

overflow-x: hidden;.box पर क्षैतिज स्क्रॉलबार कि मार्जिन उमड़ती की वजह से कुछ ब्राउज़रों में दिखाई देता है रोकने के लिए है:

यहाँ एक काम कर उदाहरण है।

यदि आप चाहते हैं कि अंतराल हमेशा स्थिर रहे और केवल एक आइटम के साथ पंक्तियों के लिए उस पंक्ति को पूरी पंक्ति में फैलाएं तो आप flex-grow: 1.item जोड़ सकते हैं।