flex-basis বৈশিষ্ট্য
flex-basis বৈশিষ্ট্যটি একটি নির্দিষ্ট ফ্লেক্স ব্লকের আকার নির্ধারণ করে
অন্যান্য ফ্লেক্স বৈশিষ্ট্য প্রয়োগ করার আগে। সাধারণভাবে, বৈশিষ্ট্যটি
মূল অক্ষ বরাবর উপাদানের আকার নির্ধারণ করে।
এর মানে হল যে যদি মূল অক্ষটি অনুভূমিক হয় -
এই বৈশিষ্ট্যটি উপাদানগুলির প্রস্থ নির্ধারণ করবে,
আর যদি উল্লম্ব হয় - তবে উচ্চতা।
একটি নির্দিষ্ট ফ্লেক্স ব্লকে প্রয়োগ করা হয়।
এই বৈশিষ্ট্যটি সংক্ষিপ্ত বৈশিষ্ট্য
flex-এর একটি组成部分।
সিনট্যাক্স
সিলেক্টর {
flex-basis: যেকোনো CSS একক (এবং শতাংশ) | auto;
}
ডিফল্ট মান: auto।
উদাহরণ
ধরি আমাদের মূল অক্ষটি অনুভূমিক, এবং
flex-basis-এর মান 50px।
এই ক্ষেত্রে উপাদানগুলির প্রস্থ হবে 50px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row; /* অক্ষ অনুভূমিক */
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
flex-basis: 50px; /* উপাদানের আকার */
border: 1px solid green;
}
:
উদাহরণ
এখন আসুন অক্ষটি ঘুরিয়ে দেই, বৈশিষ্ট্যের মান
flex-basis না বদলে। এই ক্ষেত্রে
উপাদানগুলির উচ্চতা হবে 50px:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: column; /* অক্ষ উল্লম্ব */
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
flex-basis: 50px;
border: 1px solid green;
}
:
আরও দেখুন
-
flex-directionবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির অক্ষের দিক নির্ধারণ করে -
justify-contentবৈশিষ্ট্য,
যা মূল অক্ষ বরাবর সারিবদ্ধতা নির্ধারণ করে -
align-itemsবৈশিষ্ট্য,
যা ক্রস অক্ষ বরাবর সারিবদ্ধতা নির্ধারণ করে -
flex-wrapবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির মাল্টিলাইন ক্ষমতা নির্ধারণ করে -
flex-flowবৈশিষ্ট্য,
flex-direction এবং flex-wrap-এর জন্য সংক্ষেপণ -
orderবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির ক্রম নির্ধারণ করে -
align-selfবৈশিষ্ট্য,
যা একটি ব্লকের সারিবদ্ধতা নির্ধারণ করে -
flex-growবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির প্রসারণযোগ্যতা নির্ধারণ করে -
flex-shrinkবৈশিষ্ট্য,
যা ফ্লেক্স ব্লকগুলির সংকোচনযোগ্যতা নির্ধারণ করে -
flexবৈশিষ্ট্য,
flex-grow, flex-shrink এবং flex-basis-এর জন্য সংক্ষেপণ
