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