flex-grow বৈশিষ্ট্য
flex-grow বৈশিষ্ট্যটি নির্ধারণ করে যে,
প্রয়োজনে একটি পৃথক ফ্লেক্স ব্লকটি প্রতিবেশী উপাদানগুলির তুলনায়
কতটা বড় হতে পারে।
উদাহরণস্বরূপ, যদি একটি ফ্লেক্স-কন্টেইনারের ভিতরের সমস্ত ফ্লেক্স-ব্লক
flex-grow:1 ধারণ করে, তাহলে তারা একই আকারের হবে। যদি তাদের মধ্যে একটির flex-grow:2 থাকে,
তাহলে এটি বাকি সকলের চেয়ে 2 গুণ বড় হবে।
যদি উপাদানগুলির মোট প্রস্থ
প্যারেন্টের প্রস্থের চেয়ে কম হয়, তাহলে ডানদিকে খালি জায়গা থেকে যায়।
ইচ্ছা করলে এই খালি জায়গাটি আমাদের উপাদানগুলির মধ্যে
সমানুপাতিকভাবে ভাগ করা যেতে পারে।
এটি ফ্লেক্স-উপাদানগুলিতে প্রয়োগ করা flex-grow বৈশিষ্ট্য ব্যবহার করে করা হয়। এই বৈশিষ্ট্যের মান
একটি মাত্রাবিহীন সংখ্যা।
প্রযোজ্য: একটি নির্দিষ্ট ফ্লেক্স ব্লকের উপর।
এই বৈশিষ্ট্যটি সংক্ষিপ্ত বৈশিষ্ট্য
flex-এর একটি অংশ হিসেবে অন্তর্ভুক্ত।
সিনট্যাক্স
সিলেক্টর {
flex-grow: ধনাত্মক সংখ্যা;
}
ডিফল্ট মান: 0।
উদাহরণ
এখন আমাদের কাছে দুটি ফ্লেক্স-ব্লক রয়েছে যাদের প্রস্থ
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:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.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:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.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:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
</div>
.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-directionবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির অক্ষের দিক নির্ধারণ করে -
justify-contentবৈশিষ্ট্য,
যা প্রধান অক্ষ বরাবর এলাইনমেন্ট নির্ধারণ করে -
align-itemsবৈশিষ্ট্য,
যা ক্রস অক্ষ বরাবর এলাইনমেন্ট নির্ধারণ করে -
flex-wrapবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির মাল্টিলাইন ক্ষমতা নির্ধারণ করে -
flex-flowবৈশিষ্ট্য,
flex-direction এবং flex-wrap-এর জন্য সংক্ষেপণ -
orderবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির ক্রম নির্ধারণ করে -
align-selfবৈশিষ্ট্য,
যা একটি ব্লকের এলাইনমেন্ট নির্ধারণ করে -
flex-basisবৈশিষ্ট্য,
যা একটি নির্দিষ্ট ফ্লেক্স ব্লকের আকার নির্ধারণ করে -
flex-shrinkবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির সংকোচন ক্ষমতা নির্ধারণ করে -
flexবৈশিষ্ট্য,
flex-grow, flex-shrink এবং flex-basis-এর জন্য সংক্ষেপণ
