flex সম্পত্তি
flex সম্পত্তিটি হল flex-basis,
flex-shrink
এবং flex-grow-এর সংক্ষিপ্ত রূপ।
প্রযোজ্য: একটি নির্দিষ্ট ফ্লেক্স আইটেমে।
মানগুলির ক্রম গুরুত্বপূর্ণ নয়। দ্বিতীয় এবং তৃতীয়
প্যারামিটার (flex-shrink, flex-basis)
বাধ্যতামূলক নয়।
মান
সংশ্লিষ্ট সম্পত্তিগুলো দেখুন।
ডিফল্ট মান: 0 1 auto।
উদাহরণ
ধরুন আমাদের কাছে 3টি আইটেম আছে। তাদের প্রতিটির প্রস্থ
200px এবং মোট 600px,
যা প্যারেন্ট কন্টেইনারের প্রস্থের চেয়ে বেশি, যা
300px। আসুন প্রথম আইটেমের জন্য প্রস্থ নির্ধারণ করি
200px, দ্বিতীয় আইটেমের জন্য - 300px,
তৃতীয় আইটেমের জন্য - 100px। সব আইটেমের
flex-basis মান 1 হতে দিন,
এবং flex-shrink - 1, 2, 3 হবে আইটেমের ক্রমিক নম্বর অনুযায়ী:
<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: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
আরও দেখুন
-
flex-directionসম্পত্তি,
যা ফ্লেক্স কন্টেইনারের অক্ষের দিক নির্ধারণ করে -
justify-contentসম্পত্তি,
যা মূল অক্ষ বরাবর আইটেমগুলির সারিবদ্ধকরণ নির্ধারণ করে -
align-itemsসম্পত্তি,
যা ক্রস অক্ষ বরাবর আইটেমগুলির সারিবদ্ধকরণ নির্ধারণ করে -
flex-wrapসম্পত্তি,
যা ফ্লেক্স আইটেমগুলির মাল্টি-লাইন ক্ষমতা নির্ধারণ করে -
flex-flowসম্পত্তি,
flex-direction এবং flex-wrap-এর সংক্ষিপ্ত রূপ -
orderসম্পত্তি,
যা ফ্লেক্স কন্টেইনারে আইটেমগুলির ক্রম নির্ধারণ করে -
align-selfসম্পত্তি,
যা একটি ফ্লেক্স আইটেমের সারিবদ্ধকরণ নির্ধারণ করে -
flex-basisসম্পত্তি,
যা একটি ফ্লেক্স আইটেমের প্রাথমিক আকার নির্ধারণ করে -
flex-growসম্পত্তি,
যা একটি ফ্লেক্স আইটেমের প্রসারণযোগ্যতা নির্ধারণ করে -
flex-shrinkসম্পত্তি,
যা একটি ফ্লেক্স আইটেমের সঙ্কুচিত হওয়ার ক্ষমতা নির্ধারণ করে
