flex-shrink প্রপার্টি
flex-shrink প্রপার্টিটি নির্ধারণ করে যে,
ফ্লেক্স কন্টেইনারের ভিতরে প্রতিবেশী উপাদানগুলির তুলনায়
একটি ফ্লেক্স ব্লক কতটা সঙ্কুচিত হবে যদি
পর্যাপ্ত মুক্ত স্থানের অভাব থাকে।
উদাহরণস্বরূপ, যদি একটি ফ্লেক্স কন্টেইনারের ভিতরের সমস্ত ফ্লেক্স ব্লকের
flex-shrink:1 থাকে, তাহলে তাদের আকার সমান হবে। যদি তাদের মধ্যে একটির
flex-shrink:2 থাকে, তবে এটি বাকি সকলের চেয়ে 2
গুণ ছোট হবে।
প্রযোজ্য: নির্দিষ্ট ফ্লেক্স ব্লকের উপর।
এই প্রপার্টিটি সংক্ষিপ্ত রূপের প্রপার্টি
flex-এর একটি অংশ হিসেবে অন্তর্ভুক্ত।
সিনট্যাক্স
সিলেক্টর {
flex-shrink: ধনাত্মক সংখ্যা;
}
ডিফল্ট মান: 1।
উদাহরণ
ধরুন আমাদের কাছে 3টি উপাদান রয়েছে। তাদের প্রতিটির প্রস্থ
200px এবং মোট প্রস্থ 600px,
যা প্যারেন্ট কন্টেইনারের প্রস্থের চেয়ে বেশি, যা
350px:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex-shrink: 1;
}
.elem2 {
flex-shrink: 2;
}
.elem3 {
flex-shrink: 3;
}
:
আসুন নেতিবাচক মুক্ত স্থান গণনা করি সূত্র ব্যবহার করে:
600px - 350px = 250px
flex-shrink প্রপার্টির মান বিবেচনা করে উপাদানগুলির
ওজনযুক্ত মোট প্রস্থ হবে:
200px * 1 + 200px * 2 + 200px * 3 = 1200pxএখন নির্ধারণ করি প্রথম উপাদানটি কতটা সঙ্কুচিত হবে:
250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6pxদ্বিতীয় উপাদান:
250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3pxতৃতীয় উপাদান:
250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px
দেখা যাচ্ছে যে তৃতীয় উপাদানটি, যার
flex-shrink মান 3, এটি অন্যান্য উপাদানগুলির
চেয়ে বেশি সঙ্কুচিত হবে।
আরও দেখুন
-
flex-directionপ্রপার্টি,
যা ফ্লেক্স ব্লকগুলির অক্ষের দিক নির্ধারণ করে -
justify-contentপ্রপার্টি,
যা মূল অক্ষ বরাবর এলাইনমেন্ট নির্ধারণ করে -
align-itemsপ্রপার্টি,
যা ক্রস অক্ষ বরাবর এলাইনমেন্ট নির্ধারণ করে -
flex-wrapপ্রপার্টি,
যা ফ্লেক্স ব্লকগুলির মাল্টিলাইন ক্ষমতা নির্ধারণ করে -
flex-flowপ্রপার্টি,
flex-direction এবং flex-wrap-এর জন্য সংক্ষিপ্ত রূপ -
orderপ্রপার্টি,
যা ফ্লেক্স ব্লকগুলির ক্রম নির্ধারণ করে -
align-selfপ্রপার্টি,
যা একটি ব্লকের এলাইনমেন্ট নির্ধারণ করে -
flex-basisপ্রপার্টি,
যা একটি নির্দিষ্ট ফ্লেক্স ব্লকের আকার নির্ধারণ করে -
flex-growপ্রপার্টি,
যা ফ্লেক্স ব্লকগুলির "লোভ" নির্ধারণ করে -
flexপ্রপার্টি,
flex-grow, flex-shrink এবং flex-basis-এর জন্য সংক্ষিপ্ত রূপ
