CSS-এ ফ্লেক্স এলিমেন্টগুলিকে প্রধান অক্ষ বরাবর সারিবদ্ধ করা

justify-content বৈশিষ্ট্যটি এলিমেন্টগুলিকে প্রধান অক্ষ বরাবর সারিবদ্ধ করতে দেয়। আগে আপনি ইতিমধ্যেই center, space-between, space-around, space-evenly মানগুলি শিখেছেন। আসুন এখন আরও কয়েকটি মান শিখি।

flex-start মানটি এলিমেন্টগুলিকে প্রধান অক্ষের শুরুতে নিয়ে যায়, এবং flex-end মানটি - শেষে। আসুন উদাহরণে দেখি।

উদাহরণ

প্রধান অক্ষটিকে বাম থেকে ডানে নির্দেশ করা যাক, flex-direction বৈশিষ্ট্যকে row মান দিয়ে। ব্লকগুলিকে অক্ষের শুরুতে নিয়ে যাওয়া যাক। এর জন্য justify-content কেই flex-start মানে সেট করুন:

.parent {
	display: flex;
	flex-direction: row; /* প্রধান অক্ষ বাম থেকে ডানে */
	justify-content: flex-start; /* ব্লকগুলি প্রধান অক্ষের শুরুতে */
}

কোড এক্সিকিউট করার ফলাফল:

উদাহরণ

আসুন এখন ব্লকগুলিকে অক্ষের শেষে নিয়ে যাই। এর জন্য justify-content কে flex-end মানে সেট করুন:

.parent {
	display: flex;
	flex-direction: row; /* প্রধান অক্ষ বাম থেকে ডানে */
	justify-content: flex-end; /* ব্লকগুলি প্রধান অক্ষের শেষে */
}

কোড এক্সিকিউট করার ফলাফল:

উদাহরণ

এখন প্রধান অক্ষটিকে ডান থেকে বামে নির্দেশ করা যাক, flex-direction বৈশিষ্ট্যকে row-reverse মান দিয়ে। ব্লকগুলিকে অক্ষের শুরুতে, অর্থাৎ ডান প্রান্তে নিয়ে যাওয়া যাক। এর জন্য justify-content কেই flex-start মানে সেট করুন:

.parent {
	display: flex;
	flex-direction: row-reverse; /* প্রধান অক্ষ ডান থেকে বামে */
	justify-content: flex-start; /* ব্লকগুলি প্রধান অক্ষের শুরুতে */
}

কোড এক্সিকিউট করার ফলাফল:

উদাহরণ

এবং এখন ব্লকগুলিকে প্রধান অক্ষের শেষে, অর্থাৎ বাম প্রান্তে নিয়ে যাওয়া যাক। এর জন্য justify-content কেই flex-end মানে সেট করুন:

.parent {
	display: flex;
	flex-direction: row-reverse; /* প্রধান অক্ষ ডান থেকে বামে */
	justify-content: flex-end; /* ব্লকগুলি প্রধান অক্ষের শেষে */
}

কোড এক্সিকিউট করার ফলাফল:

উদাহরণ

আগের উদাহরণগুলিতে প্রধান অক্ষটি অনুভূমিক ছিল। এখন এটিকে উল্টে দেওয়া যাক এবং উল্লম্বভাবে নির্দেশ করা যাক।

প্রধান অক্ষটিকে নীচের দিকে নির্দেশ করা যাক, flex-direction বৈশিষ্ট্যকে column মান দিয়ে।

ব্লকগুলিকে প্রধান অক্ষের শুরুতে, অর্থাৎ উপরের প্রান্তে নিয়ে যাওয়া যাক। এর জন্য justify-content কেই flex-start মানে সেট করুন:

.parent {
	display: flex;
	flex-direction: column; /* প্রধান অক্ষ উপর থেকে নীচে */
	justify-content: flex-start; /* ব্লকগুলি প্রধান অক্ষের শুরুতে */
}

কোড এক্সিকিউট করার ফলাফল:

উদাহরণ

এখন ব্লকগুলিকে প্রধান অক্ষের শেষে, অর্থাৎ নীচের প্রান্তে নিয়ে যাওয়া যাক। এর জন্য justify-content কেই flex-end মানে সেট করুন:

.parent {
	display: flex;
	flex-direction: column; /* প্রধান অক্ষ উপর থেকে নীচে */
	justify-content: flex-end; /* ব্লকগুলি প্রধান অক্ষের শেষে */
}

কোড এক্সিকিউট করার ফলাফল:

উদাহরণ

প্রধান অক্ষটিকে উল্টে দেওয়া যাক, নীচ থেকে উপরের দিকে নির্দেশ করা যাক। এর জন্য flex-direction বৈশিষ্ট্যকে column-reverse মান দেওয়া যাক। এই ক্ষেত্রে ব্লকগুলি তাদের ক্রম পরিবর্তন করবে - অক্ষের শুরুতে HTML কোডের শেষ ব্লকটি থাকবে।

ব্লকগুলিকে প্রধান অক্ষের শুরুতে, অর্থাৎ নীচের প্রান্তে নিয়ে যাওয়া যাক। এর জন্য justify-content কেই flex-start মানে সেট করুন:

.parent {
	display: flex;
	flex-direction: column-reverse; /* প্রধান অক্ষ নীচ থেকে উপরে */
	justify-content: flex-start; /* ব্লকগুলি প্রধান অক্ষের শুরুতে */
}

কোড এক্সিকিউট করার ফলাফল:

উদাহরণ

ব্লকগুলিকে প্রধান অক্ষের শেষে, অর্থাৎ উপরের প্রান্তে নিয়ে যাওয়া যাক। এর জন্য justify-content কেই flex-end মানে সেট করুন:

.parent {
	display: flex;
	flex-direction: column-reverse; /* প্রধান অক্ষ নীচ থেকে উপরে */
	justify-content: flex-end; /* ব্লকগুলি প্রধান অক্ষের শেষে */
}

কোড এক্সিকিউট করার ফলাফল:

ব্যবহারিক কাজ

নিম্নলিখিত নমুনা অনুযায়ী পৃষ্ঠাটি পুনরাবৃত্তি করুন: