flex-basis गुण

flex-basis गुण किसी विशिष्ट फ्लेक्स ब्लॉक का आकार उस पर शेष फ्लेक्स गुण लागू करने से पहले निर्धारित करता है। सामान्य तौर पर, यह गुण मुख्य अक्ष के अनुदिश तत्व का आकार निर्धारित करता है। इसका मतलब है कि यदि मुख्य अक्ष क्षैतिज है - यह गुण तत्वों की चौड़ाई निर्धारित करेगा, और यदि ऊर्ध्वाधर है - तो ऊंचाई।

किसी विशिष्ट फ्लेक्स ब्लॉक पर लागू होता है।

यह गुण संक्षिप्त रूप गुण flex का एक घटक भाग है।

सिन्टैक्स

सिलेक्टर {
	flex-basis: कोई भी CSS यूनिट (और प्रतिशत) | auto;
}

डिफ़ॉल्ट मान: auto.

उदाहरण

मान लीजिए कि हमारी मुख्य अक्ष क्षैतिज है, और flex-basis का मान 50px है। इस स्थिति में तत्वों की चौड़ाई 50px होगी:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent	{
	display: flex;
	flex-direction: row; /* अक्ष क्षैतिज है */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px; /* तत्व का आकार */
	border: 1px solid green;
}

उदाहरण

आइए अब अक्ष को पलटें, गुण के मान को बदले बिना। इस स्थिति में तत्वों की ऊंचाई 50px होगी:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* अक्ष ऊर्ध्वाधर है */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

यह भी देखें

flex-direction गुण,
जो फ्लेक्स ब्लॉकों के अक्षों की दिशा निर्धारित करता है
justify-content गुण,
जो मुख्य अक्ष के साथ संरेखण निर्धारित करता है
align-items गुण,
जो क्रॉस अक्ष के साथ संरेखण निर्धारित करता है
flex-wrap गुण,
जो फ्लेक्स ब्लॉकों की मल्टीलाइन क्षमता निर्धारित करता है
flex-flow गुण,
flex-direction और flex-wrap के लिए संक्षिप्त रूप
order गुण,
जो फ्लेक्स ब्लॉकों का क्रम निर्धारित करता है
align-self गुण,
जो किसी एक ब्लॉक का संरेखण निर्धारित करता है
flex-grow गुण,
जो फ्लेक्स ब्लॉकों की विस्तार क्षमता निर्धारित करता है
flex-shrink गुण,
जो फ्लेक्स ब्लॉकों की संकुचन क्षमता निर्धारित करता है
flex गुण,
flex-grow, flex-shrink और flex-basis के लिए संक्षिप्त रूप