दिलचस्प पोस्ट
एक मैट्रिक्स में दी गई पंक्ति खोजें मैं WinForms में किसी चित्र को कैसे घुमाएगा कैसे कीबोर्ड को दिखाया गया है और छिपा हुआ है यह कैसे पता लगा सकता है जावास्क्रिप्ट – ट्रैक माउस स्थिति REST में बनाम पोस्ट करें सी अर्थ में "अपरिभाषित संदर्भ varName" क्या करता है? दृश्यता के समयबद्धता के बारे में अस्थिरता के विस्तृत अर्थविज्ञान जावास्क्रिप्ट से web.config पढ़ना सूचियों की सूची में अजगर खोज कैसे जैक्सन Wildfly को कॉन्फ़िगर करें? WPF में यूआई (मुख्य) थ्रेड सुरक्षित रूप से एक्सेस करना R.string प्रोग्राममेटिक रूप से मूल्य बदलें सी ++ के लिए सबसे अच्छा खुले XML पार्सर क्या है? सरल VBA कोड मुझे समय त्रुटि चलाने के लिए देता है 91 वस्तु चर या ब्लॉक सेट के साथ नहीं जावास्क्रिप्ट, एक नाम का एक स्ट्रिंग का उपयोग कर एक चर का संदर्भ लें?

फ्लेक्स मदों की कई पंक्तियों के बीच अंतरिक्ष (अंतराल) को हटा दें जब वे लपेटते हैं

मैं एक सेट ऊंचाई के साथ एक कंटेनर में एक-दूसरे के नीचे कई चीजें रखने की कोशिश कर रहा हूं। यदि कोई स्थान नहीं छोड़ा जाता है तो आइटम एक-दूसरे के बगल में चलेंगे।

यह विचार है:

मैं इसे फ्लेक्सबॉक्स का उपयोग करने की कोशिश कर रहा हूं, एक सेट की ऊंचाई वाली कंटेनर, दिशा column सेट है और फ़्लेक्स flex-wrap wrap :

मुद्दा यह है कि स्तंभों के बीच व्यापक अंतराल है।

यहां छवि विवरण दर्ज करें

मैंने flex-start करने के लिए दोनों justify-content और align-items को सेट करने की कोशिश की, लेकिन संभवतः यह डिफ़ॉल्ट मान है।

क्या इसका हल करने का कोई तरीका है?

यहां कोड है:

 * { box-sizing: border-box; } body { font-family: sans-serif; } .container { display: flex; flex-wrap: wrap; height: 300px; flex-direction: column; background-color: #ccc; } .items { width: 100px; height: 100px; margin: 10px; background-color: tomato; color: white; font-size: 60px; font-weight: bold; text-align: center; padding: 15px; } 
 <div class="container"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> </div> 

codepen

Solutions Collecting From Web of "फ्लेक्स मदों की कई पंक्तियों के बीच अंतरिक्ष (अंतराल) को हटा दें जब वे लपेटते हैं"

एक फ्लेक्स कंटेनर की प्रारंभिक सेटिंग align-content: stretch

इसका मतलब है कि फ्लेक्स आइटम की कई पंक्तियों को क्रॉस अक्ष के साथ समान रूप से वितरित किया जाएगा।

इस व्यवहार को ओवरराइड करने के लिए, align-content: flex-start लागू align-content: flex-start कंटेनर से align-content: flex-start करें


जब आप एक सिंगल-लाइन फ्लेक्स कन्टेनर (यानी, flex-wrap: nowrap ) में काम कर रहे हैं, तो क्रॉस अक्ष के साथ स्थान वितरित करने के लिए उपयोग करने वाले गुण align-items और align-self

जब आप बहु-लाइन फ्लेक्स कन्टेनर (यानी flex-wrap: wrap ) में काम कर रहे हैं – जैसे प्रश्न में – फॉरेक्स लाइनों (पंक्तियों / स्तंभों) को क्रॉस अक्ष के साथ वितरित करने के लिए उपयोग की जाने वाली संपदा align-content

कल्पना से:

8.3। क्रॉस-अक्ष संरेखण: संरेखण align-items और align-self गुण

align-items अनाम फ्लेक्स आइटम सहित सभी फ्लेक्स कंटेनर की वस्तुओं के लिए डिफ़ॉल्ट संरेखण सेट करती हैं। align-self इस डिफ़ॉल्ट संरेखण को व्यक्तिगत फ्लेक्स मदों के लिए ओवरराइड होने की अनुमति देता है।

8.4। पैकिंग फ्लेक्स लाइन्स: align-content संपत्ति

align-content संपत्ति फ़्लेक्स कंटेनर के अंदर एक फ्लेक्स कंटेनर की रेखाओं को संरेखित करती है, जब क्रॉस-एक्स में अतिरिक्त स्थान होता है, जैसा कि समानता justify-content मुख्य-अक्ष में व्यक्तिगत वस्तुओं को संरेखित करता है ध्यान दें, इस संपत्ति का एकल-लाइन फ्लेक्स कंटेनर पर कोई प्रभाव नहीं पड़ता है।

align-content संपत्ति छह मान लेती है:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

यहां stretch के लिए परिभाषा दी गई stretch :

stretch

शेष अंतरिक्ष को ऊपर उठाने के लिए लाइन्स खंड। यदि बचे हुए रिक्त स्थान ऋणात्मक है, तो यह वैल्यू flex-start समान है। अन्यथा, फ्री-स्पेस को सभी रेखाओं के बीच समान रूप से विभाजित किया जाता है, उनका क्रॉस साइज बढ़ाना

दूसरे शब्दों में, align-content: stretch क्रॉस अक्ष पर align-content: stretch flex: 1 समान है flex: 1 मुख्य अक्ष पर flex: 1