CSS-এ ফ্লেক্স ব্লকের ক্রম

ধরা যাক আমাদের নিম্নলিখিত ব্লকগুলি দেওয়া আছে, যা একটি সারিতে সাজানো:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

আসুন HTML কোডে তাদের ক্রম পরিবর্তন না করে স্ক্রিনে তাদের প্রদর্শনের ক্রম পরিবর্তন করি।

এই জন্য order বৈশিষ্ট্য exists, যা নিম্নলিখিত নিয়ম অনুসারে নির্দিষ্ট উপাদানগুলির ক্রম নির্ধারণ করে: যার মান বেশি, সে অক্ষের শেষের দিকে closer stands, এবং যার কম - সে শুরুতে closer stands।

বৈশিষ্ট্যের মান একটি ধনাত্মক বা ঋণাত্মক সংখ্যা নিতে পারে। ডিফল্টরূপে সমস্ত উপাদান একে অপরের অনুসরণ করে, এর মানে হল যে তাদের order শূন্য।

আসুন আমাদের উপাদানগুলির ক্রম পরিবর্তন করি। এটি করার জন্য, দ্বিতীয় উপাদানটিতে একটি অতিরিক্ত ক্লাস elem সেট করুন এবং এই ক্লাসের জন্য order বৈশিষ্ট্যটি 1 মানে সেট করুন:

.elem {
	order: 1;
	border: 1px solid red;
}

যেহেতু সমস্ত উপাদান ডিফল্টরূপে 0 ক্রম থাকবে, এবং আমাদের দ্বিতীয় উপাদানটির অন্যদের চেয়ে বেশি ক্রম থাকবে, তাই এটি তাদের পরে অবস্থান করবে:

এখন ঋণাত্মক মান -1 সেট করা যাক:

.elem {
	order: -1;
	border: 1px solid red;
}

এই ক্ষেত্রে, আমাদের ব্লক অক্ষের শুরুতে চলে যাবে:

বিভিন্ন অক্ষ দিকনির্দেশের জন্য এই বৈশিষ্ট্যটির কাজ স্বাধীনভাবে চেষ্টা করুন।