आइटम

Question

फ्लेक्सबॉक्स (हालांकि सीएसएस में अनुभव किया गया) के लिए कुछ नया होने के नाते, ऐसा लगता है कि मैंने पढ़ा है कि अधिकांश ट्यूटोरियल द्वारा आसानी से "चमकदार" एक फ्लेक्स आइटम के बीच अंतर है।

उदाहरण के लिए, सबसे उद्धृत ट्यूटोरियल में से एक this one at CSS Tricks है।

यह बहुत अच्छा है और उपयोगी है, इस तरह चित्र मुझसे दूर फेंक दिया है:

सूचना फ्लेक्स आइटम के बीच रिक्त स्थान। यद्यपि कहीं भी उल्लेख नहीं किया गया है, न ही नमूना कोड में, यह सीएसएस मार्जिन के साथ रिक्त स्थान प्राप्त करने का एकमात्र तरीका प्रतीत होता है।

सही, या क्या मुझे यहां कुछ महत्वपूर्ण याद आ रहा है?

क्योंकि मैं क्या बनाने की जरूरत है इस, ऊपर "केन्द्र" डेमो की तरह एक बहुत कुछ:

यदि:

हालांकि, जब मैं इसे अपने आप कोशिश करते हैं, मैं निश्चित रूप से इस मिल मैं अंतरिक्ष के चारों ओर उपयोग करता हूं, मुझे इसके बजाय मिलता है। विशाल जगह

इसलिए ऐसा लगता है कि मुझे पहले 2 बक्से में मार्जिन-दाएं जोड़ने की आवश्यकता है ताकि उनके बीच एक छोटे से अंतर के साथ 3 केंद्रित बॉक्स प्राप्त हो सकें।

क्या यह फ्लेक्सबॉक्स के लिए बस एक खराब उपयोग केस है? क्योंकि मुझे सरल मार्जिन और केंद्र का उपयोग करके फ्लेक्सबॉक्स के साथ अपने 3 बक्से बनाने का थोड़ा सा फायदा दिखाई देता है।

क्या मुझे यहां कुछ स्पष्ट याद आ रही है?

Answer 1

नहीं - आप कुछ भी याद नहीं कर रहे हैं। फ्लेक्सबॉक्स तत्वों को ऑर्डर करने और मुख्य या क्रॉस अक्ष के साथ उन तत्वों के सामान्य संरेखण को परिभाषित करने के लिए बहुत ही भयानक है, लेकिन व्यक्तिगत आइटम स्पेसिंग पर सीधे बात नहीं करता है। If you take a look at this Codepen used in the Flexbox article, आप देखेंगे कि वे उपयोग करते हैं:

margin-top: 10px 

तत्व अंतर को परिभाषित करने के लिए। उम्मीद है की यह मदद करेगा! अंतरिक्ष between`:

Answer 2

.rope { 
 
    width: 393px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    background-color: aquamarine; 
 
} 
 
.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 15px; 
 
    background: red; 
 
}

<div class='container'> 
 
    <div class='rope'> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>