এই নিবন্ধটি Tailwind CSS-এ ফ্লেক্স এবং গ্রিড আইটেমগুলি অর্ডার করার পদ্ধতিকে ব্যাখ্যা করবে।
Tailwind এ ফ্লেক্স এবং গ্রিড আইটেম কিভাবে অর্ডার করবেন?
Tailwind CSS-এ ফ্লেক্স এবং গ্রিড আইটেম অর্ডার করতে, একটি HTML ফাইল তৈরি করুন। তারপর, 'order-' ইউটিলিটি ব্যবহার করুন এবং ফ্লেক্স এবং গ্রিড আইটেমগুলির ক্রম পরিবর্তন করতে HTML প্রোগ্রামে অর্ডার মান নির্দিষ্ট করুন। এটি ফ্লেক্স আইটেমগুলিকে DOM (ডকুমেন্ট অবজেক্ট মডেল) এ প্রদর্শনের চেয়ে ভিন্ন ক্রমে রেন্ডার করার অনুমতি দেয়। পরিবর্তন নিশ্চিত করতে, HTML ওয়েব পৃষ্ঠা দেখুন।
আরও ভালভাবে বোঝার জন্য প্রদত্ত-প্রদত্ত পদক্ষেপগুলি দেখুন:
ধাপ 1: এইচটিএমএল প্রোগ্রামে ফ্লেক্স এবং গ্রিড আইটেম অর্ডার করুন
একটি HTML প্রোগ্রাম তৈরি করুন এবং ' অর্ডার-
< শরীর >
< div ক্লাস = 'ফ্লেক্স এইচ-20' >
< div ক্লাস = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div ক্লাস = 'অর্ডার-শেষ bg-হলুদ-500 w-32 m-1' > 2 < / div >
< div ক্লাস = 'অর্ডার-প্রথম bg-teal-500 w-32 m-1' > 3 < / div >
< div ক্লাস = 'order-2 bg-কমলা-500 w-32 m-1' > 4 < / div >
< / div >
< / শরীর >
এখানে:
- ' অর্ডার-3 ” ক্লাস উপাদানটির ক্রম 3 তে সেট করে এবং ফ্লেক্স আইটেমটি ফ্লেক্স পাত্রের মধ্যে তৃতীয় আইটেম হিসাবে অবস্থান করবে।
- ' অর্ডার শেষ ” ক্লাস এলিমেন্টের অর্ডারটিকে শেষ বলে সেট করে এবং এটি ফ্লেক্স কন্টেইনারের মধ্যে শেষ আইটেম হবে।
- ' অর্ডার-প্রথম ” ক্লাস প্রথম হওয়া উপাদানটির ক্রম নির্দিষ্ট করে এবং এটি ফ্লেক্স কন্টেইনারের মধ্যে প্রথম আইটেম হিসাবে অবস্থান করা হবে।
- ' অর্ডার-2 ” ক্লাস উপাদানটির ক্রম 2 এ সেট করে এবং এটি ফ্লেক্স কন্টেইনারের মধ্যে দ্বিতীয় আইটেম হিসাবে অবস্থান করবে।
- ' w-32 ” ক্লাস প্রতিটি ফ্লেক্স আইটেমের প্রস্থের 32 ইউনিট প্রযোজ্য।
- ' m-1 ” ক্লাস প্রতিটি ফ্লেক্স আইটেমের চারপাশে 1 ইউনিট মার্জিন যোগ করে।
ধাপ 2: আউটপুট যাচাই করুন
ফ্লেক্স এবং গ্রিড আইটেমগুলি অর্ডার করা হয়েছে তা নিশ্চিত করতে HTML ওয়েব পৃষ্ঠাটি দেখুন:
এটি লক্ষ্য করা যেতে পারে যে ফ্লেক্স এবং গ্রিড আইটেমগুলি সফলভাবে অর্ডার করা হয়েছে যা সেগুলি নির্দিষ্ট করা হয়েছিল।
উপসংহার
Tailwind CSS-এ ফ্লেক্স এবং গ্রিড আইটেম অর্ডার করতে, ' অর্ডার- <মান> ” ইউটিলিটি এবং এইচটিএমএল প্রোগ্রামে ফ্লেক্স এবং গ্রিড আইটেমগুলির অর্ডার মান নির্দিষ্ট করুন। এটি ওয়েব পৃষ্ঠায় ফ্লেক্স এবং গ্রিড আইটেমগুলিকে পুনর্বিন্যাস করে। যাচাইয়ের জন্য, HTML ওয়েব পৃষ্ঠায় পরিবর্তনগুলি দেখুন এবং পরিবর্তনগুলি নিশ্চিত করুন৷ এই নিবন্ধটি Tailwind CSS-এ ফ্লেক্স এবং গ্রিড আইটেম অর্ডার করার পদ্ধতির চিত্র তুলে ধরেছে।