Module‌‌ ‌‌৮ ‌‌এ‌‌ ‌‌আমরা‌‌ ‌‌যাকিছু‌‌ ‌‌শিখেছি‌‌

Module‌‌ ‌‌৮ ‌‌এ‌‌ ‌‌আমরা‌‌ ‌‌যাকিছু‌‌ ‌‌শিখেছি‌‌

Responsive CSS layout

 

• Website এর layout কি ? (আমরা গুগল করে দেখতে পারি)

• আমরা যদি কোণ section কে বা কোণ div কে center এ আনতে চাই তাহলে justify-content:center করে দিতে পারি তাহলে মাঝখানে চলে আসবে ।

 

উদাহরণ

.container {display: flex;border: 2px solid lightsalmon;height: 300px;justify-content: center;justify-content: flex-end;}       .box {height: 200px;width: 200px;border: 1px dotted tomato;}     <div class="container"><div class="box">box no -1</div><div class="box">box no -2</div><div class="box">box no -3</div></div>   Default ভাবে justify-content: flex-start থাকে । justify-content: space-between; এটা করলে div এর মাঝে কিছু গ্যাপ চলে আসবে সেটা ব্রাউজার এর সাইজ ছোট করলেও সে অনুযায়ী space কমে যাবে justify-content: space-evenly; এর মানে হল div গুলোর ডানে বামে সব যায়গায় সমান space থাকবে   align-items: flex-end; যদি দেই তাহলে প্যারেন্টের width বা height এর bottom বরাবর মিলে যাবে align-items:center; যদি করি তাহলে সে parent এর width এর মাঝ বরাবর সেট হবে align-items: stretch; আমরা করতে পারি তাহলে পারেন্টের height এর সম্পূর্ণ যায়গা পূরণ করে ফেলবে (তবে child দের height রিমুভ করে দিতে হবে )

 

• Flex-grow এর কাজ কি ? (এটা অনেক সময় কাজে লাগে যেমন ২ টা div আছে সেখানকার একটার width fixed রাখতে হবে আবার আর একটা div এর width ওয়েবপেজ এর পুরোটা মিলে দেখাতে হবে তখন আমরা এটা ব্যাবহার করব )

 

উদাহরণ

.container {display: flex;border: 2px solid lightsalmon;height: 300px;}#full {flex-grow: 1;}.box {width: 200px;border: 1px dotted tomato;} <div class="container"><div class="box">box no -1</div><div id="full" class="box">box no -2</div></div>

• Responsive লগইন ফর্ম ডিজাইন । (সব display:flex ব্যাবহার করে করার চেষ্টা করব  ) লিঙ্ক

• কিভাবে ওয়েবপেজে কিভাবে grid বানাতে হয় ? উদাহরণ

.grid-con {display: grid;grid-template-columns: 200px 200px;grid-template-columns: repeat(4, 1fr);grid-gap: 20px 20px;}.grid {border: 1px solid goldenrod;} <div class="grid-con">div.grid*24{grid number -$} </div> আমরা এখানে প্রথমে grid-template-columns: 200px 200px ; করেছি এর মানে হল যতগুলো div থাকুক না  কেন ২টা কলামে ভাগ করে ফেলবে grid-template-columns: repeat(4, 1fr); এর মানে হল ৪টা গ্রিড তৈরি হবে এবং full webpage এ । অর্থাৎ responsive  আমরা repeat(4, 1fr); এর 1fr যায়গায় একাধিক value যোগ করতে পারি যেমনঃ repeat(4,1fr,2fr,3fr) কিন্তু এখানকার 4 হল কয়টা গ্রিড হবে তার সংখ্যা . আর fr responsive করতে সাহায্য করে । grid-gap: 20px 20px; এর অর্থ হল গ্রিডের উপরে এবং নিচে কতটুকু গ্যাপ(space) তৈরি হবে ।

 

 

• e ২৫ column এর ফুড আইটেমকে কিভাবে Responsivকরে ? (display:flex; flex-wrap:wrap) এর মাধ্যমে আবার আমরা @mediaquary এর সাহায্যে এই কাজগুলো করতে পারি । তবে আমরা flex দিয়েই করব । flex দিয়ে না হলে আমরা @mediaquary ব্যাবহার করব ।

• flex-wrap: wrap; এর কাজ কি ? (যদি একটা container এর ভিতরে অনেকগুল div থাকে এবং সেগুলাকে স্ক্রীন অনুযায়ী responsive ভাবে দেখাতে হয় তখন আমরা flex-wrap ব্যাবহার করব )

.container {         display: flex;         flex-wrap: wrap;         padding: 10px;       } মনে রাখবেন flex-wrap প্যারেন্ট div বা section কে দিতে হবে নয়ত কাজ করবে না

 

• Img কে hover করলে যেন টেক্সট show করে (এটা করার জন্য position:abs, relative এর সাহায্য নিতে হবে ) transform অ্যান্ড transition ব্যাবহার করতে হবে img তে

•  

 

 

 

 

 

 

All module link

 

আর আমার github এ যাইতে চাইলে এই লিঙ্কে ক্লিক করুন

About

Md: Rashedul Islam Shihab Writer of this note Batch4 Social accounts

‌‌‌