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

width এবং height বৈশিষ্ট্যগুলি অক্ষের দিক无关ভাবে ফ্লেক্স এলিমেন্টের প্রস্থ এবং উচ্চতা নির্ধারণ করে। অর্থাৎ, যদি অক্ষটি অনুভূমিক হয়, তবে width প্রস্থ নির্ধারণ করবে, কিন্তু যদি অক্ষটি উল্লম্ব হয়, তবুও width প্রস্থ নির্ধারণ করবে। কখনও কখনও এই আচরণ সুবিধাজনক নয়।

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

ধরা যাক প্রধান অক্ষটি এখন অনুভূমিক, এবং flex-basis এর মান 50px। এই ক্ষেত্রে এলিমেন্টগুলির প্রস্থ হবে 50px:

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

css.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:

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

css.parent {
  display: flex;
  flex-direction: column; /* অক্ষ উল্লম্ব */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: