Tailwind CSS বিভিন্ন অফার করে “ সারিবদ্ধ আইটেম ” কন্টেইনারের ক্রস-অক্ষ বরাবর ফ্লেক্স এবং গ্রিড আইটেমগুলির অবস্থান নিয়ন্ত্রণ করতে ইউটিলিটিগুলি৷ এই ইউটিলিটি ক্লাসগুলির মধ্যে রয়েছে 'আইটেম-স্টার্ট', 'আইটেম-সেন্টার', 'আইটেম-এন্ড', 'আইটেম-বেসলাইন', এবং 'আইটেম-স্ট্রেচ'। অধিকন্তু, ব্যবহারকারীরা 'আইটেম-
এই নিবন্ধটি টেলউইন্ডের 'সারিবদ্ধ-আইটেম' ইউটিলিটিগুলিতে ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি প্রয়োগ করার পদ্ধতি প্রদর্শন করবে।
টেলউইন্ডে 'সারিবদ্ধ-আইটেম' সহ ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্নগুলি কীভাবে প্রয়োগ করবেন?
Tailwind-এ “justify-content” ইউটিলিটিগুলিতে কাঙ্খিত ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি প্রয়োগ করতে, একটি HTML কাঠামো তৈরি করুন। এর পরে, নির্দিষ্ট মানটি সংজ্ঞায়িত করুন ' আইটেম- <মান> ' ব্যবহার করে বিভিন্ন স্ক্রীন মাপের জন্য ইউটিলিটি ' মো 'বা' এলজি 'ব্রেকপয়েন্ট। অবশেষে, যাচাইকরণের জন্য ওয়েব পৃষ্ঠার পর্দার আকার পরিবর্তন করুন।
উদাহরণ
এই উদাহরণে, আমরা 'আইটেম-স্টার্ট' বৈশিষ্ট্য সহ একটি ফ্লেক্স কন্টেইনার তৈরি করব। আমরা ব্যবহার করব ' মো 'এর সাথে ব্রেকপয়েন্ট' আইটেম-কেন্দ্র 'উপযোগিতা এবং' এলজি 'এর সাথে ব্রেকপয়েন্ট' আইটেম-শেষ 'এ উপযোগিতা' আউটপুট টেলউইন্ডে 'সারিবদ্ধ-আইটেম' ইউটিলিটিগুলির সাথে ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি প্রয়োগ করার জন্য, 'এ কাঙ্ক্ষিত মান নির্ধারণ করুন আইটেম- <মান> 'ব্যবহার করে বিভিন্ন স্ক্রিনের আকারের জন্য উপযোগিতা' মো 'বা' এলজি 'ব্রেকপয়েন্ট। যাচাইকরণের জন্য, ওয়েব পৃষ্ঠার পর্দার আকার পরিবর্তন করুন এবং পরিবর্তনগুলি নিশ্চিত করুন৷ এই নিবন্ধটি টেইলউইন্ডের 'সারিবদ্ধ-আইটেম' ইউটিলিটিগুলিতে নির্দিষ্ট ব্রেকপয়েন্ট এবং মিডিয়া কোয়েরি প্রয়োগ করার উদাহরণটি তুলে ধরেছে।
< শরীর >
< div ক্লাস = 'ফ্লেক্স আইটেম-শুরু >
< div ক্লাস = 'bg-pink-600 py-4 w-40' > 1 div >
< div ক্লাস = 'bg-pink-600 py-12 w-40' > 2 div >
< div ক্লাস = 'bg-pink-600 py-8 w-40' > 3 div >
div >
শরীর >
এখানে:
উপরের আউটপুটটি দেখায় যে ফ্লেক্স আইটেমগুলির উল্লম্ব প্রান্তিককরণ পর্দার আকার পরিবর্তিত হওয়ার সাথে সাথে পরিবর্তিত হচ্ছে। এটি নির্দেশ করে যে নির্দিষ্ট ব্রেকপয়েন্ট এবং মিডিয়া প্রশ্নগুলি কার্যকরভাবে 'সারিবদ্ধ-আইটেম' ইউটিলিটির সাথে প্রয়োগ করা হয়েছে। উপসংহার