CSS-এ ফ্লেক্স এলিমেন্টের জিরো গ্রিডিনেস

যদি কোনও এলিমেন্টের জন্য flex-grow শূন্য হয়, তবে সেই এলিমেন্টটি ফ্রি স্পেস বন্টনে অংশ নেবে না। ডিফল্টরূপে, গ্রিডিনেসের মান ঠিক শূন্য হয় এবং তাই flex-grow না দেওয়া এলিমেন্টগুলি নিজেদের মধ্যে ফ্রি স্পেস ভাগ করে না।

উদাহরণ হিসাবে আসুন একটি গণনা করি। আমাদের কাছে তিনটি ফ্লেক্স এলিমেন্ট আছে, প্রতিটির প্রস্থ 100px। প্রথম এলিমেন্টটির flex-grow নেই (বা এটি 0 এর সমান), দ্বিতীয় এলিমেন্টের flex-grow রয়েছে, যা 2 এর সমান, এবং তৃতীয়টি - 3 এর সমান।

ধরি প্যারেন্টের প্রস্থ 500px। তাহলে ফ্রি স্পেস হবে 200px, এবং flex-grow এর এক ইউনিটের জন্য পড়বে 200px / 5 = 40px। ফলে, প্রথম এলিমেন্টের প্রস্থ 100px ই থাকবে, যেহেতু এটি বন্টনে অংশ নেয় না, দ্বিতীয়টির প্রস্থ হবে 100px + 2 * 40px = 180px, এবং তৃতীয়টির প্রস্থ - 100px + 3 * 40px = 220px।

ব্যবহারিক সমস্যা

নীচের সমস্ত সমস্যায় আপনাকে কিছু কোড দেওয়া হবে ফ্লেক্স এলিমেন্ট সহ, যাদের প্রস্থ এবং flex-grow রয়েছে। দেওয়া কোডের উপর ভিত্তি করে গণনা করুন, প্রতিটি এলিমেন্টের কি আকার হবে। তারপর কোডটি রান করুন এবং এলিমেন্টগুলির প্রকৃত প্রস্থ পরিমাপ করে আপনার গণনা পরীক্ষা করুন।

Задание 1

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

css.parent {
  display: flex;
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 0;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}

Задание 2

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

css.parent {
  display: flex;
  width: 900px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 300px;
  flex-grow: 0;
}
.elem2 {
  width: 200px;
  flex-grow: 3;
}
.elem3 {
  width: 100px;
  flex-grow: 2;
}

Задание 3

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
  <div class="child elem4">4</div>
</div>

css.parent {
  display: flex;
  width: 700px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 200px;
  flex-grow: 0;
}
.elem2 {
  width: 200px;
  flex-grow: 0;
}
.elem3 {
  width: 100px;
  flex-grow: 1;
}
.elem4 {
  width: 100px;
  flex-grow: 1;
}