मार्जिन-टॉप केवल जब फ्लेक्स आइटम लपेटा जाता है

Question

मेरे पास दो फ्लेक्स आइटम के साथ एक फ्लेक्स कंटेनर है। मैं एक दूसरे पर मार्जिन-टॉप सेट करना चाहता हूं, लेकिन केवल जब यह लपेटा जाता है और पहली फ्लेक्स लाइन पर नहीं।

यदि संभव हो तो, मैं मीडिया प्रश्नों का उपयोग करने से बचना चाहता हूं।

मुझे लगा कि पहले तत्व पर मार्जिन-बॉटम एक समाधान हो सकता है। हालांकि, यह तत्वों को लिपटे नहीं होने पर सबसे नीचे जगह जोड़ता है, इसलिए यही समस्या है।

यह मेरा कोड है:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

Comments

डिबगिंग सहायता मांगने वाले प्रश्न ("यह कोड काम क्यों नहीं कर रहा है?") में वांछित व्यवहार, एक विशिष्ट समस्या या त्रुटि और प्रश्न में ही इसे पुन: पेश करने के लिए आवश्यक सबसे छोटा कोड शामिल होना चाहिए । कृपया इस आवश्यकता के आसपास कोड ब्लॉक का दुरुपयोग न करें ।

— पॉलि_ड

समस्या यह है कि इस मामले में मुझे अधिक कोड के साथ समझाने की आवश्यकता नहीं थी, इसलिए यदि ब्लॉक कोड की आवश्यकता है तो यह स्टैकऑवरफ़्लो की समस्या है।

— मैनुअल डि इओरियो

मुद्दा SO के भावी उपयोगकर्ताओं के लिए उपयोगिता है । यदि आपका JSfiddle लिंक चला गया तो आपका पद अनिवार्य रूप से बेकार है। इसीलिए SO आपसे कोड मांगता है .... जब आप प्रश्न बनाते हैं तो आदर्श रूप से आपके पास उपलब्ध कोड स्निपेट्स में।

— पौली_ड

ठीक है, मैं समझ गया, मैं नियमों का पालन करने के लिए सवाल का संपादन कर रहा हूं;)

— मैनुअल डी इओरियो

Answer 1

आप margin-topदोनों फ्लेक्स आइटमों में कुछ जोड़ सकते हैं , और margin-topफ्लेक्स कंटेनर में एक ही राशि का नकारात्मक ।

इस तरह, फ्लेक्स कंटेनर का नकारात्मक मार्जिन पहली पंक्ति में फ्लेक्स आइटम के मार्जिन को बेअसर कर देगा, लेकिन उन वस्तुओं का मार्जिन नहीं होगा जो अन्य लाइनों से लिपटे हैं।

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
  background: red;
}
.item-big {
  background: blue;
  width: 300px;
}

<div class="container">
   <div class="item-big">
      FIRST BIG ELEM
   </div>
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>

Comments

ओह सीएसएस, यू मुझे

— डिस

उत्कृष्ट उत्तर

— पिलाऊ

यह तब काम नहीं करता जब कंटेनर की पृष्ठभूमि का रंग या सीमा होती है

— फ्रैंक वैन विजक

@FrankvanWijk अपने मार्जिन-फिक्स, और दृश्य तत्वों के लिए मूल के लिए एक नेस्टेड पारदर्शी div का उपयोग करें।

— अवशेष