Flexbox-এ flex-direction প্রপার্টি উপাদানগুলোর বিন্যাসের দিক নির্ধারণ করে। এর মাধ্যমে আপনি সহজেই উপাদানগুলোকে অনুভূমিক বা উল্লম্বভাবে সাজাতে পারেন। নিচে flex-direction এর বিভিন্ন মানের ব্যবহার এবং এর প্রভাব বিস্তারিতভাবে আলোচনা করা হলো।
1. flex-direction: row (ডিফল্ট)
ব্যবহার:
row হল Flexbox-এর ডিফল্ট মান। এর মাধ্যমে Flex Itemsগুলো অনুভূমিকভাবে বাম থেকে ডানে সাজানো হয়।
কোন জায়গায় ব্যবহার হবে:
এটি সাধারণত ওয়েবপেজের প্রধান কন্টেন্ট, ন্যাভিগেশন বার, বা অন্যান্য উপাদান যেখানে আইটেমগুলোকে এক লাইনে অনুভূমিকভাবে সাজাতে হয়, সেখানে ব্যবহার করা হয়।
উদাহরণ:
.flex-container {
display: flex;
flex-direction: row; /* অনুভূমিকভাবে আইটেমগুলো সাজানো হবে */
}
.flex-item {
background-color: lightblue;
padding: 10px;
text-align: center;
}
আউটপুট:
আইটেমগুলো অনুভূমিকভাবে বাম থেকে ডানে সাজানো হবে।
2. flex-direction: row-reverse
ব্যবহার:
row-reverse ব্যবহার করলে Flex Itemsগুলো অনুভূমিকভাবে ডান থেকে বামে সাজানো হয়। এটি row এর বিপরীত।
কোন জায়গায় ব্যবহার হবে:
যখন আপনি অনুভূমিকভাবে আইটেমগুলোর ক্রম পরিবর্তন করতে চান, যেমন ন্যাভিগেশন বার বা আইকনগুলোর জন্য যেখানে প্রথমে ডান দিকের আইটেম প্রদর্শন করতে চান।
উদাহরণ:
.flex-container {
display: flex;
flex-direction: row-reverse; /* অনুভূমিকভাবে ডান থেকে বামে আইটেমগুলো সাজানো হবে */
}
.flex-item {
background-color: lightcoral;
padding: 10px;
text-align: center;
}
আউটপুট:
আইটেমগুলো অনুভূমিকভাবে ডান থেকে বামে সাজানো হবে।
3. flex-direction: column
ব্যবহার:
column ব্যবহার করলে Flex Itemsগুলো উল্লম্বভাবে উপরে থেকে নিচে সাজানো হয়। এটি কন্টেইনারের উচ্চতা অনুসারে উপাদানগুলোকে লম্বা করে সাজায়।
কোন জায়গায় ব্যবহার হবে:
এটি বিশেষভাবে ব্যবহার করা হয় যখন উপাদানগুলোকে তালিকা, ফর্ম, বা সেকশনে উল্লম্বভাবে সাজানো হয়।
উদাহরণ:
.flex-container {
display: flex;
flex-direction: column; /* উল্লম্বভাবে উপাদানগুলো সাজানো হবে */
}
.flex-item {
background-color: lightgreen;
padding: 10px;
text-align: center;
}
আউটপুট:
আইটেমগুলো উল্লম্বভাবে উপরে থেকে নিচে সাজানো হবে।
4. flex-direction: column-reverse
ব্যবহার:
column-reverse ব্যবহার করলে Flex Itemsগুলো উল্লম্বভাবে নিচ থেকে উপরে সাজানো হয়। এটি column এর বিপরীত।
কোন জায়গায় ব্যবহার হবে:
এটি যখন প্রয়োজন হয় আইটেমগুলোর উল্লম্ব ক্রম উল্টানো, যেমন একটি চ্যাট বক্স যেখানে পুরোনো মেসেজ নিচে এবং নতুন মেসেজ উপরে দেখাতে হয়।
উদাহরণ:
.flex-container {
display: flex;
flex-direction: column-reverse; /* উল্লম্বভাবে নিচ থেকে উপরে আইটেমগুলো সাজানো হবে */
}
.flex-item {
background-color: lightyellow;
padding: 10px;
text-align: center;
}
আউটপুট:
আইটেমগুলো উল্লম্বভাবে নিচ থেকে উপরে সাজানো হবে।
Flex Direction এর বিভিন্ন মানের তুলনা
| Flex Direction | বিন্যাসের ধরন | ব্যবহার |
|---|---|---|
row | অনুভূমিকভাবে বাম থেকে ডানে | ওয়েবপেজের প্রধান কন্টেন্ট বা ন্যাভিগেশন বার |
row-reverse | অনুভূমিকভাবে ডান থেকে বামে | ন্যাভিগেশন আইটেমগুলোর ক্রম পরিবর্তন |
column | উল্লম্বভাবে উপরে থেকে নিচে | ফর্ম, তালিকা, সেকশন ইত্যাদি |
column-reverse | উল্লম্বভাবে নিচ থেকে উপরে | চ্যাট বক্স, উল্লম্ব লিস্ট ইত্যাদি |
সারাংশ
flex-direction Flexbox-এর একটি গুরুত্বপূর্ণ প্রপার্টি, যা Flex Items-এর বিন্যাসের দিক নিয়ন্ত্রণ করে। এটি আপনাকে অনুভূমিক বা উল্লম্ব লেআউট তৈরি করতে সাহায্য করে এবং কন্টেইনারে উপাদানগুলোর প্রদর্শনের ক্রম নিয়ন্ত্রণ করতে সক্ষম করে। row, row-reverse, column, এবং column-reverse-এর মাধ্যমে আপনি সহজে উপাদানগুলোর দিক পরিবর্তন করতে পারেন এবং আরও সুন্দর ও কার্যকরী ওয়েব ডিজাইন তৈরি করতে পারেন।
