फ्लेक्स आइटम को स्ट्रेचिंग से रोकें

Question

नमूना:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

मेरे दो सवाल हैं, कृपया:

1. यह मूल रूप से क्यों होता है span?
2. एक फ्लेक्स कंटेनर में अन्य फ्लेक्स आइटम को प्रभावित किए बिना इसे खींचने से रोकने के लिए सही तरीका क्या है?

Answer 1

आप ऊंचाई में अवधि को फैलाना नहीं चाहते हैं?
आपके पास कंटेनर की पूरी ऊंचाई तक खिंचाव न करने के लिए एक या अधिक फ्लेक्स-आइटम को प्रभावित करने की possiblity है।

कंटेनर के सभी फ्लेक्स-आइटम को प्रभावित करने के लिए, इसे चुनें:
आपको सेटalign-items: flex-start;करना होगाdivऔर इस कंटेनर के सभी फ्लेक्स-आइटमों को उनकी सामग्री की ऊंचाई मिलेगी।

div {
  align-items: flex-start;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}

<div>
  <span>This is some text.</span>
</div>

केवल एक ही फ्लेक्स-आइटम को प्रभावित करने के लिए, इसे चुनें:
यदि आप कंटेनर पर एकल फ्लेक्स-आइटम को हटाना चाहते हैं, तो आपको इस फ्लेक्स-आइटम पर सेटalign-self: flex-start;करना होगा। कंटेनर के अन्य सभी फ्लेक्स-आइटम प्रभावित नहीं होते हैं।

div {
  display: flex;
  height: 200px;
  background: tan;
}
span.only {
  background: red;
  align-self:flex-start;
}
span {
    background:green;
}

<div>
  <span class="only">This is some text.</span>
  <span>This is more text.</span>
</div>

ऐसा क्यों हो रहा है span?
संपत्ति का डिफ़ॉल्ट मान align-itemsहै stretch। यही कारण है कि spanकी ऊंचाई भरें div।

baselineऔर के बीच अंतर flex-start?
यदि आपके पास फ्लेक्स-आइटम पर कुछ पाठ हैं, तो विभिन्न फ़ॉन्ट-आकारों के साथ, आप फ्लेक्स-आइटम को लंबवत रखने के लिए पहली पंक्ति के आधार रेखा का उपयोग कर सकते हैं। एक छोटे-से फ़ॉन्ट आकार वाले एक फ्लेक्स-आइटम में कंटेनर और शीर्ष पर खुद के बीच कुछ जगह होती है। साथ flex-startफ्लेक्स-मद (अंतरिक्ष) के बिना कंटेनर के शीर्ष करने के लिए सेट कर दिया जाएगा।

div {
  align-items: baseline;
  background: tan;
  display: flex;
  height: 200px;
}
span {
  background: red;
}
span.fontsize {
  font-size:2em;
}

<div>
  <span class="fontsize">This is some text.</span>
  <span>This is more text.</span>
</div>

आप यहां baselineऔर इसके बीच अंतर के बारे में अधिक जानकारी पा सकते हैं flex-start:
फ्लेक्स-स्टार्ट और बेसलाइन में क्या अंतर है?

Comments

उत्तर के लिए धन्यवाद, लेकिन यह सभी फ्लेक्स आइटम को प्रभावित करता है। और एक सवाल: मूल्यों baselineऔर flex-startमूल्यों के बीच अंतर क्या है ? उनके परिणाम समान प्रतीत होते हैं। क्या वे एक स्थिति में भिन्न हो सकते हैं?

— मोरी

बहुत अच्छा लगता है! यदि आप मुझे baselineऔर flex-startमूल्यों के बीच का अंतर भी बताएंगे, तो मैं आभारी रहूंगा ।

— मोरी

बीच क्या अंतर है baselineऔर flex-start?

— माइकल बेंजामिन

युक्ति: यदि आप उन्हें क्षैतिज रूप से संरेखित करना चाहते हैं, तो बस उपयोग करें align-items: center;:)

— रिकार्डो ज़िया

# हेक: अपने तत्व को एक नए डिव के साथ लपेटें। यह नए पैरेंट डिव को स्ट्रेच करेगा और आपके तत्व को अछूता छोड़ देगा।

— user1948585