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 হবে আইটেমের ক্রমিক নম্বর অনুযায়ী:

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

css.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;
}

Результат:

আরও দেখুন