CSS-এ ফ্লেক্স মডেলে পৃথক উপাদান সমন্বয়
নিম্নলিখিত বৈশিষ্ট্যগুলি, যা আমরা অধ্যয়ন করব,
সেগুলি আর ফ্লেক্স উপাদানগুলির পিতামাতাকে দেওয়া হয় না,
বরং উপাদানগুলিকেই দেওয়া হয়। আসুন আমরা
align-self বৈশিষ্ট্যটি বিবেচনা করি, যা একটি পৃথক
ব্লককে ক্রস অক্ষ বরাবর সমন্বয় করে।
ধরুন আমাদের কাছে ফ্লেক্স ব্লকগুলি আছে, যা একটি সারিতে
sorted। এগুলিকে উল্লম্বভাবে কেন্দ্রে সারিবদ্ধ করা যাক,
align-items কে center মানে সেট করে,
এবং দ্বিতীয় উপাদানটিকে একটি অতিরিক্ত ক্লাস
elem দেওয়া যাক এবং এর জন্য একটি ভিন্ন সমন্বয় সেট করা যাক,
উদাহরণস্বরূপ, এটিকে শীর্ষ প্রান্তে সংযুক্ত করা যাক।
এটি করার জন্য, আমাদের elem ক্লাস সহ উপাদানটিতে
align-self বৈশিষ্ট্যটিকে
flex-start মানে সেট করব:
<div class="parent">
<div class="child">1</div>
<div class="child elem">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
.elem {
align-self: flex-start;
}
:
