এই নিবন্ধটি ফ্লেক্স আইটেমগুলিকে Tailwind CSS-এ মোড়ানো থেকে আটকানোর পদ্ধতি ব্যাখ্যা করবে।
টেলউইন্ডে মোড়ানো থেকে ফ্লেক্স আইটেমগুলিকে কীভাবে প্রতিরোধ/বন্ধ করবেন?
টেলউইন্ডে ফ্লেক্স আইটেমগুলিকে মোড়ানো বন্ধ করতে, একটি HTML ফাইল তৈরি করুন। তারপর, ফ্লেক্স আইটেমগুলিকে মোড়ানো থেকে রোধ করতে এইচটিএমএল প্রোগ্রামে ফ্লেক্স কন্টেইনারের সাথে 'ফ্লেক্স-নওয়ারাপ' ইউটিলিটি ব্যবহার করুন। এরপরে, HTML ওয়েব পৃষ্ঠাটি দেখে পরিবর্তনগুলি নিশ্চিত করুন৷
এটি আরও ভালভাবে বোঝার জন্য নীচের উল্লিখিত পদক্ষেপগুলি ব্যবহার করে দেখুন:
ধাপ 1: এইচটিএমএল প্রোগ্রামে মোড়ানো থেকে ফ্লেক্স আইটেমগুলিকে প্রতিরোধ করুন
একটি HTML প্রোগ্রাম তৈরি করুন এবং ' flex-nowrap ফ্লেক্স আইটেমগুলিকে মোড়ানো থেকে আটকাতে পছন্দসই ফ্লেক্স কন্টেইনার সহ ইউটিলিটি:
< শরীর >
< div ক্লাস = 'flex flex-nowrap h-40' >
< div ক্লাস = 'ভিত্তি-1/4 বিজি-লাল-500 মি-1' > 1 < / div >
< div ক্লাস = 'ভিত্তি-1/3 বিজি-হলুদ-500 মি-1' > 2 < / div >
< div ক্লাস = 'ভিত্তি-1/2 বিজি-টিল-500 মি-1' > 3 < / div >
< / div >
< / শরীর >
এখানে:
- ' ফ্লেক্স ” ক্লাসে ফ্লেক্সবক্স লেআউট সক্ষম করে উপাদান এবং শিশু উপাদানগুলিকে সাজানো এবং সারিবদ্ধ করার অনুমতি দেয়।
- ' flex-nowrap ” ক্লাস সুনির্দিষ্ট করে যে ফ্লেক্স আইটেমগুলিকে একাধিক লাইনে মোড়ানো উচিত নয় এবং সমস্ত ফ্লেক্স আইটেমকে এক লাইনে রাখা উচিত নয়।
- দ্য ' ভিত্তি-1/4 ', ' ভিত্তি-1/3 ', এবং ' ভিত্তি-1/2 ” ক্লাস ভিতরের সেট
এর প্রস্থ যথাক্রমে তাদের মূল উপাদানগুলির 25%, 33.33% এবং 50%।
ধাপ 2: আউটপুট যাচাই করুন
ফ্লেক্স আইটেমগুলি মোড়ানো হয়নি তা নিশ্চিত করতে, HTML ওয়েব পৃষ্ঠাটি দেখুন:
উপরের ওয়েব পৃষ্ঠায়, ফ্লেক্স আইটেমগুলি একক লাইনে রয়েছে এবং মোড়ানো হয়নি।
উপসংহার
টেলউইন্ডে ফ্লেক্স আইটেমগুলিকে মোড়ানো থেকে আটকাতে, এইচটিএমএল প্রোগ্রামে পছন্দসই ফ্লেক্স কন্টেইনার সহ 'ফ্লেক্স-নওরাপ' ইউটিলিটি ব্যবহার করুন। এই ইউটিলিটি ফ্লেক্স আইটেমগুলিকে মোড়ানো থেকে বাধা দেয়। যাচাইকরণের জন্য, ওয়েব পৃষ্ঠায় পরিবর্তনগুলি দেখুন৷ এই নিবন্ধটি টেলউইন্ড CSS-এ ফ্লেক্স আইটেমগুলিকে মোড়ানো থেকে আটকানোর পদ্ধতির চিত্র তুলে ধরেছে।