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