প্রধান অক্ষ বরাবর ফ্লেক্স এলিমেন্টের আকার

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;
}

এখন বৈশিষ্ট্যের মান না বদলে অক্ষটি উল্টিয়ে দেই। flex-basis। এই ক্ষেত্রে এলিমেন্টগুলির উচ্চতা হবে 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 নির্ধারণ করুন। বিভিন্ন অক্ষ বরাবর ব্লকগুলির আচরণ Observe করুন।

যদি অক্ষটি অনুভূমিক হয় এবং একটি ব্লককে flex-basis বৈশিষ্ট্য এবং একই সাথে width বৈশিষ্ট্য নির্ধারণ করা হয়, তবে flex-basis এর প্রাধান্য থাকবে। এটি যাচাই করুন।

যদি অক্ষটি উল্লম্ব হয় এবং একটি ব্লককে flex-basis বৈশিষ্ট্য এবং একই সাথে height বৈশিষ্ট্য নির্ধারণ করা হয়, তবে flex-basis এর প্রাধান্য থাকবে। এটি যাচাই করুন।