CSS-এ ফ্লেক্স এলিমেন্টের লোভ

ধরুন এখন আমাদের কাছে দুটি ফ্লেক্স-ব্লক আছে, একটি সারিতে সাজানো। এই ব্লকগুলির প্রস্থ নির্ধারণ করা হয়েছে 100px, এবং তাদের প্যারেন্টের - 300px:

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

css.parent {
  display: flex;
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

আপনি দেখতে পাচ্ছেন, আমাদের এলিমেন্টের মোট প্রস্থ প্যারেন্টের প্রস্থের চেয়ে কম, তাই ডানদিকে খালি জায়গা থাকে।

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

আসুন অনুশীলনে দেখি কিভাবে এই বৈশিষ্ট্য কাজ করে।

উদাহরণ

এখন আমাদের কাছে দুটি ফ্লেক্স-ব্লক আছে যার প্রস্থ 100px। তাদের মোট প্রস্থ 200px, এবং প্যারেন্টের প্রস্থ - 300px। এর মানে হল যে 100px মুক্ত স্থান অবশিষ্ট থাকে।

যদি এলিমেন্টগুলিতে flex-grow নির্দিষ্ট না করা থাকে, তবে আমরা কেবল এই মুক্ত স্থানটি দেখতে পাব। যদি এটি তাদের জন্য নির্দিষ্ট করা থাকে, তবে এলিমেন্টগুলির প্রকৃত প্রস্থ নির্দিষ্ট প্রস্থের চেয়ে বেশি হবে - তারা আনুপাতিকভাবে মুক্ত স্থানটি নিজেদের মধ্যে ভাগ করে নেবে এবং এটি তাদের নিজস্ব প্রস্থের সাথে যোগ করবে।

উদাহরণস্বরূপ ধরুন প্রথম এলিমেন্টের flex-grow সমান 1, এবং দ্বিতীয়টির - 3। আসুন গণনা করি, প্রতিটি এলিমেন্ট মুক্ত স্থানের কত অংশ পাবে।

প্রথমে আমাদের সকল এলিমেন্টের flex-grow-এর মোট একক প্রাপ্ত করতে হবে। প্রথম এলিমেন্টের এটি 1, এবং দ্বিতীয়টির - 3। এর মানে হল যে মোট এটি 4।

এখন 100px মুক্ত স্থানকে 4 দ্বারা ভাগ করলে আমরা পাই যে 25px পড়ে flex-grow-এর একটি এককের উপর। এর মানে, যে প্রথম এলিমেন্টে একটি একক যোগ হবে flex-grow, অর্থাৎ 25px, এবং দ্বিতীয়টিতে - তিনটি একক, অর্থাৎ 75px।

প্রথম এলিমেন্টের প্রস্থ হবে 125px, এবং দ্বিতীয়টির - 175px:

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

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

Результат:

উদাহরণ

ধরুন এখন প্যারেন্টের প্রস্থ 400px, প্রথম এলিমেন্টের প্রস্থ 200px, এবং দ্বিতীয় এলিমেন্টের প্রস্থ - 100px। এর মানে, যে মুক্ত স্থান আবার সমান 100px।

আসুন প্রতিটি এলিমেন্টে flex-grow নির্দিষ্ট করি, সমান 1। মোট হবে 2, অর্থাৎ 100px মুক্ত স্থান 2 দ্বারা ভাগ করতে হবে। এর মানে হবে যে 50px পড়ে লোভের একটি এককের উপর।

যেহেতু সকল এলিমেন্টের flex-grow-এর মান একই, তাই সকল এলিমেন্টে একই মান যোগ হবে 50px। এর মানে, যে প্রথম এলিমেন্টটি হবে 250px, এবং দ্বিতীয়টি হবে 150px:

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

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

Результат:

উদাহরণ

ধরুন আবার প্যারেন্টের প্রস্থ 400px, প্রথম এলিমেন্টের প্রস্থ 200px, এবং দ্বিতীয় এলিমেন্টের প্রস্থ - 100px।

আসুন এখন প্রথম এলিমেন্টে flex-grow নির্দিষ্ট করি 3 মানে, এবং দ্বিতীয়টি - 1 মানে। এর মানে হবে যে মোট লোভ 4। তাহলে লোভের একটি একক সমান 100px / 4 = 25px।

প্রথম এলিমেন্টে 75px যোগ হবে, এবং এটি হবে 275px, এবং দ্বিতীয়টিতে - 25px, এটি হবে 125px:

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

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

Результат:

ব্যবহারিক কাজ

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

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: 3;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  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: 700px;
  height: 200px;
  border: 1px solid red;
}
.child {
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  width: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 2;
}
.elem3 {
  width: 200px;
  flex-grow: 3;
}

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: 100px;
  flex-grow: 1;
}
.elem2 {
  width: 100px;
  flex-grow: 1;
}
.elem3 {
  width: 100px;
  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 class="child elem4">4</div>
</div>

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