मुख्य अक्ष के साथ फ्लेक्स तत्व का आकार

width और height गुण धुरियों की दिशा की परवाह किए बिना फ्लेक्स तत्व की चौड़ाई और ऊंचाई निर्धारित करते हैं। यानी, यदि अक्ष क्षैतिज है, तो width चौड़ाई निर्धारित करेगा, लेकिन यदि अक्ष ऊर्ध्वाधर है, तो width तब भी चौड़ाई निर्धारित करेगा। कभी-कभी यह व्यवहार सुविधाजनक नहीं होता है।

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

मान लीजिए कि मुख्य अक्ष क्षैतिज है, और 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;
}

5 फ्लेक्स-ब्लॉक बनाएं। उन्हें मुख्य अक्ष के साथ 100px की चौड़ाई निर्धारित करें। विभिन्न धुरियों के साथ ब्लॉकों के व्यवहार को देखें।

यदि अक्ष क्षैतिज है और ब्लॉक को flex-basis गुण और साथ ही width गुण दिया गया है, तो flex-basis को प्राथमिकता दी जाएगी। इसे सत्यापित करें।

यदि अक्ष ऊर्ध्वाधर है और ब्लॉक को flex-basis गुण और साथ ही height गुण दिया गया है, तो flex-basis को प्राथमिकता दी जाएगी। इसे सत्यापित करें।