फ्लेक्स आइटम को फैलने से रोकना

फ्लेक्सबॉक्स लेआउट का उपयोग करते समय, फ्लेक्स आइटम को खींचना और उनके कंटेनर में उपलब्ध स्थान को भरना संभव है . हालाँकि, ऐसी स्थितियाँ हैं जब आप ऐसा होने से रोकना चाहेंगे।

फ्लेक्स आइटम क्यों खिंच सकते हैं?

डिफ़ॉल्ट रूप से, फ्लेक्स आइटम प्राथमिक अक्ष के साथ खिंचेंगे उनके कंटेनर का, जो आमतौर पर या तो क्षैतिज (पंक्ति) या ऊर्ध्वाधर (स्तंभ) होता है। ऐसा इसलिए है क्योंकि फ्लेक्स प्रॉपर्टी डिफ़ॉल्ट रूप से 1 पर सेट है, जो इंगित करती है कि आइटम लचीला होना चाहिए और किसी भी उपलब्ध स्थान को भरने के लिए विस्तारित होना चाहिए।

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

किसी फ्लेक्स आइटम को फैलने से रोकने के लिए, आप डिफ़ॉल्ट फ्लेक्स मान को 0 पर सेट करके ओवरराइड कर सकते हैं। इससे आइटम अपनी सामग्री में फिट होने के लिए सिकुड़ जाएगा, जिससे वह अधिक जगह नहीं ले पाएगा। आवश्यकता से अधिक।

उदाहरण

निम्नलिखित उदाहरण पर विचार करें:

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

  This is some text.

इस उदाहरण में, फ्लेक्स आइटम (स्पैन) अपने कंटेनर की पूरी ऊंचाई को भरने के लिए फैलता है। इसे रोकने के लिए, निम्न शैली को div तत्व में जोड़ें:

align-items: flex-start;

यह फ्लेक्स आइटम को उनके कंटेनर की शुरुआत के साथ संरेखित करता है, जिससे उन्हें फैलने से रोका जा सके पूरी ऊँचाई भरें।