Pure.CSS এর সাথে Flexbox ব্যবহার করে Responsive Design তৈরি করা অত্যন্ত সহজ এবং কার্যকরী। Flexbox একটি CSS প্রযুক্তি যা ওয়েব পেজের লেআউট দ্রুত এবং সহজভাবে তৈরি করতে সহায়তা করে। এটি বিভিন্ন স্ক্রীন সাইজ অনুযায়ী উপাদানগুলোকে সঠিকভাবে সাজানোর জন্য উপযুক্ত। Pure.CSS দিয়ে Flexbox ব্যবহার করে রেসপন্সিভ ডিজাইন তৈরি করলে আপনার ওয়েব পেজ বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শিত হবে।
Flexbox এর মূল ধারণা:
Flexbox একটি লেআউট মডেল যা এক বা একাধিক উপাদানকে সোজা বা কাস্টমভাবে সাজানোর জন্য ব্যবহৃত হয়। Flexbox এর মাধ্যমে আপনি উপাদানগুলোকে সোজা রেখেও তাদের মধ্যে গ্যাপ এবং স্পেস কন্ট্রোল করতে পারবেন, এবং উপাদানগুলির আকার এবং বিন্যাস সহজে পরিবর্তন করতে পারবেন।
Pure.CSS এর সাথে Flexbox ব্যবহার:
Pure.CSS নিজেই Flexbox এর জন্য বিল্ট-ইন স্টাইল প্রদান করে না, তবে আপনি নিজেই flex ক্লাস ব্যবহার করে উপাদানগুলোকে Flexbox লেআউটের মধ্যে সাজাতে পারেন। Pure.CSS গ্রিড সিস্টেমের সাথে Flexbox ব্যবহার করে আপনি রেসপন্সিভ ওয়েব পেজ ডিজাইন করতে পারবেন।
উদাহরণ ১: Flexbox এর মাধ্যমে Responsive Design
এখানে, একটি সিম্পল Flexbox Layout তৈরি করা হয়েছে যা বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে কাজ করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Design</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 30%;
background-color: #f2f2f2;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
/* For smaller screens */
@media (max-width: 768px) {
.item {
flex: 1 1 45%;
}
}
/* For mobile screens */
@media (max-width: 480px) {
.item {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<div class="container pure-g">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
- display: flex:
containerক্লাসের মাধ্যমে Flexbox লেআউট চালু করা হয়েছে, যার ফলে এর মধ্যে থাকা উপাদানগুলি সোজা হয়ে থাকবে। - flex-wrap: wrap: এটি Flexbox-এর উপাদানগুলোকে একে অপরের উপরে চলে না গিয়ে একটি নতুন লাইনে সাজাতে সহায়তা করে।
- flex: 1 1 30%: এটি প্রতিটি আইটেমের জন্য বেসিক ফ্লেক্স সাইজ নির্ধারণ করে, যেখানে ৩০% প্রস্থ দেওয়া হয়েছে (ডেস্কটপের জন্য)।
- @media (max-width: 768px): এই মিডিয়া কুয়েরি ৭৬৮ পিক্সেলের কম স্ক্রীনে (ট্যাবলেট) ফ্লেক্স আইটেমের আকার ৪৫% করা হয়েছে।
- @media (max-width: 480px): এই মিডিয়া কুয়েরি ৪৮০ পিক্সেলের কম স্ক্রীনে (মোবাইল) ফ্লেক্স আইটেমের আকার ১০০% করা হয়েছে, যাতে প্রতিটি আইটেম সম্পূর্ণ প্রস্থে প্রদর্শিত হয়।
উদাহরণ ২: Flexbox Grid Layout with Pure.CSS
এখানে, Pure.CSS এর গ্রিড সিস্টেম ব্যবহার করে Flexbox এর সাথে আরও উন্নত রেসপন্সিভ লেআউট তৈরি করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Grid with Pure.CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 30%;
background-color: #f2f2f2;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
/* For smaller screens */
@media (max-width: 768px) {
.item {
flex: 1 1 45%;
}
}
/* For mobile screens */
@media (max-width: 480px) {
.item {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<div class="container pure-g">
<div class="item pure-u-1-3">Item 1</div>
<div class="item pure-u-1-3">Item 2</div>
<div class="item pure-u-1-3">Item 3</div>
<div class="item pure-u-1-3">Item 4</div>
<div class="item pure-u-1-3">Item 5</div>
<div class="item pure-u-1-3">Item 6</div>
</div>
</body>
</html>
ব্যাখ্যা:
- pure-u-1-3: Pure.CSS এর গ্রিড সিস্টেমের ক্লাস যা প্রতিটি আইটেমের প্রস্থ ১-৩ ভাগে ভাগ করে, অর্থাৎ ৩টি কলামে ভেঙে দেখাবে।
- Flexbox Layout: Flexbox এর মাধ্যমে flex-wrap: wrap দিয়ে গ্রিড এলিমেন্টগুলিকে মোবাইল, ট্যাবলেট এবং ডেস্কটপ স্ক্রীনে সুন্দরভাবে দেখানো হচ্ছে।
- Media Queries: মিডিয়া কুয়েরি ব্যবহার করে গ্রিড সিস্টেমটি আরও ছোট স্ক্রীনে সঠিকভাবে উপস্থাপন করা হচ্ছে।
৩. Flexbox Column Layout for Mobile-First Design
মোবাইল-ফার্স্ট ডিজাইনের জন্য Flexbox এর মাধ্যমে একটি কলাম লেআউট তৈরি করা যা স্ক্রীনের আকার অনুযায়ী উপাদানগুলিকে সাজাবে।
উদাহরণ: Mobile-First Flexbox Column Layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Column Layout</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
<style>
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
.item {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
/* For larger screens */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
.item {
flex: 1;
}
}
</style>
</head>
<body>
<div class="container pure-g">
<div class="item pure-u-1-3">Item 1</div>
<div class="item pure-u-1-3">Item 2</div>
<div class="item pure-u-1-3">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
- flex-direction: column: প্রথমে উপাদানগুলো কলামে সাজানো থাকবে (মোবাইল স্ক্রীনে)।
- @media (min-width: 768px): যখন স্ক্রীন ৭৬৮px বা তার বেশি হবে (ট্যাবলেট বা ডেস্কটপ), Flexbox উপাদানগুলোকে রো-এ (row) সাজাবে এবং প্রতিটি আইটেমের প্রস্থ সমান হবে।
Flexbox এর মাধ্যমে Pure.CSS ব্যবহার করে রেসপন্সিভ ডিজাইন তৈরি করা খুবই সহজ এবং দ্রুত। এটি আপনাকে ওয়েব পেজের উপাদানগুলোকে বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে সাজানোর ক্ষমতা প্রদান করে। Pure.CSS এবং Flexbox এর সংমিশ্রণ দিয়ে আপনি মোবাইল-ফার্স্ট, রেসপন্সিভ এবং স্কেলেবল ওয়েব ডিজাইন তৈরি করতে পারবেন।
Read more
