फ्लेक्स-आधार - सीएसएस-ट्रिक्स

Anonim

flex-basisसंपत्ति लचीला बॉक्स लेआउट मॉड्यूल की एक उप-संपत्ति है।

यह फ्लेक्स आइटम के प्रारंभिक आकार को निर्दिष्ट करता है, इससे पहले कि कोई भी स्थान फ्लेक्स कारकों के अनुसार वितरित हो। flexशॉर्टहैंड से छोड़े जाने पर , इसका निर्दिष्ट मान लंबाई शून्य है।

एक फ्लेक्स-आधार मूल्य autoतत्व को उसकी आकार संपत्ति के अनुसार सेट करता है (जो कि स्वयं कीवर्ड हो सकता है auto, जो तत्व को उसकी सामग्री के आधार पर आकार देता है)।

वाक्य - विन्यास

flex-basis: .flex-item ( flex-basis: 100px; )

कृपया ध्यान दें कि किसी भी चौड़ाई के लिए, नकारात्मक लंबाई अमान्य है।

डेमो

इस पेन को देखें!

ब्राउज़र का समर्थन

  • (आधुनिक) का अर्थ है विनिर्देश से हाल का वाक्य-विन्यास (जैसे display: flex;)
  • (हाइब्रिड) का अर्थ है 2011 से एक विषम अनौपचारिक वाक्यविन्यास (जैसे display: flexbox;)
  • (पुराना) का अर्थ है 2009 से पुराना वाक्यविन्यास (जैसे display: box;)
क्रोम सफारी फ़ायर्फ़ॉक्स ओपेरा अर्थात एंड्रॉयड आईओएस
21+ (आधुनिक)
20- (पुराना)
3.1+ (पुराना) 2-21 (पुराना)
22+ (नया)
12.1+ (आधुनिक) 10+ (संकर) 2.1+ (पुराना) 3.2+ (पुराना)

ब्लैकबेरी ब्राउज़र 10+ नए सिंटैक्स का समर्थन करता है।

सबसे अच्छा ब्राउज़र समर्थन पाने के लिए वाक्यविन्यास को कैसे मिलाया जाए, इसके बारे में अधिक जानकारी के लिए, कृपया इस लेख (CSS-Tricks) या इस लेख (DevOpera) का संदर्भ लें।