Pure.CSS একটি লাইটওয়েট এবং সিম্পল CSS ফ্রেমওয়ার্ক যা Flexbox Layouts তৈরি করতে সহায়তা করে। Flexbox হল একটি CSS লেআউট মডেল যা এলিমেন্টগুলিকে একে অপরের সঙ্গে অটোমেটিক্যালি যথাযথভাবে সাজাতে সহায়ক, বিশেষত যখন আপনার লেআউটে বিভিন্ন সাইজের উপাদান থাকে। Pure.CSS আপনাকে Flexbox লেআউট তৈরির জন্য খুব সহজ এবং কার্যকর পদ্ধতি প্রদান করে।
এখানে Pure.CSS দিয়ে Flexbox Layouts তৈরি করার কয়েকটি উদাহরণ দেওয়া হল:
1. Basic Flexbox Layout in Pure.CSS
Flexbox ব্যবহার করে একটি সাধারণ লেআউট তৈরি করা যেটি একাধিক উপাদানকে এক লাইনে সাজায়।
Basic Flexbox Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.flex-container {
display: flex; /* Enable Flexbox */
justify-content: space-between; /* Distribute items evenly */
padding: 10px;
background-color: #f0f0f0;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 30%;
text-align: center;
}
</style>
<title>Basic Flexbox Layout</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
display: flex;: Flexbox এলিমেন্ট তৈরি করতে এই প্রপার্টি ব্যবহার করা হয়েছে।justify-content: space-between;: এলিমেন্টগুলিকে একে অপর থেকে সমান ব্যবধানে সাজানোর জন্য।.flex-item: প্রতিটি ফ্লেক্স আইটেমের জন্য ৩০% প্রস্থ, ব্যাকগ্রাউন্ড কালার এবং প্যাডিং সহ স্টাইল করা হয়েছে।
এটি একটি basic Flexbox layout, যেখানে তিনটি ফ্লেক্স আইটেম সমানভাবে সাজানো হয়েছে এবং তাদের মধ্যে যথাযথ ব্যবধান রাখা হয়েছে।
2. Flexbox Layout with Centered Items
এটি একটি ফ্লেক্স কন্টেইনার তৈরি করবে যার মধ্যে এলিমেন্টগুলি কেন্দ্রস্থলে থাকবে।
Centering Flex Items Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.flex-container {
display: flex;
justify-content: center; /* Horizontally center items */
align-items: center; /* Vertically center items */
height: 100vh; /* Full viewport height */
background-color: #f0f0f0;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 200px;
text-align: center;
}
</style>
<title>Centered Flexbox Layout</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Centered Item</div>
</div>
</body>
</html>
ব্যাখ্যা:
justify-content: center;: এলিমেন্টগুলিকে অনুভূমিকভাবে কেন্দ্রস্থলে স্থাপন করার জন্য।align-items: center;: এলিমেন্টগুলিকে উল্লম্বভাবে কেন্দ্রস্থলে রাখার জন্য।height: 100vh;: কন্টেইনারের উচ্চতা সম্পূর্ণ ভিউপোর্টের সমান।
এটি একটি centered Flexbox layout, যেখানে একটি এলিমেন্ট পুরো স্ক্রীনের মাঝখানে অবস্থান করছে।
3. Flexbox Layout with Row and Column Directions
Flexbox এর একটি শক্তিশালী বৈশিষ্ট্য হলো আপনি এটি row অথবা column আর্কিটেকচারে সাজাতে পারেন।
Row and Column Flexbox Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
/* Flex Row */
.flex-row {
display: flex;
flex-direction: row; /* Arrange items in a row */
justify-content: space-around;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
width: 30%;
text-align: center;
}
/* Flex Column */
.flex-column {
display: flex;
flex-direction: column; /* Arrange items in a column */
justify-content: space-between;
background-color: #f0f0f0;
padding: 20px;
height: 100vh;
}
</style>
<title>Row and Column Flexbox Layout</title>
</head>
<body>
<!-- Row Layout -->
<div class="flex-row">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
<!-- Column Layout -->
<div class="flex-column">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
flex-direction: row;: এলিমেন্টগুলোকে row আর্কিটেকচারে সাজানোর জন্য।flex-direction: column;: এলিমেন্টগুলোকে column আর্কিটেকচারে সাজানোর জন্য।justify-content: space-around;: এলিমেন্টগুলিকে একে অপর থেকে সমান ব্যবধানে সাজানোর জন্য।
এই উদাহরণটি দুইটি ভিন্ন Flexbox লেআউট দেখায়: একটি row layout এবং একটি column layout।
4. Flexbox Layout with Equal Height Items
Flexbox এর মাধ্যমে আপনি এমন লেআউট তৈরি করতে পারেন, যেখানে সব এলিমেন্টের উচ্চতা সমান থাকে।
Equal Height Flexbox Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
color: white;
text-align: center;
flex-grow: 1; /* Make items grow equally */
margin: 5px;
padding: 20px;
}
</style>
<title>Equal Height Flexbox Layout</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
ব্যাখ্যা:
flex-grow: 1;: এটি এলিমেন্টগুলিকে সমান উচ্চতা ও প্রস্থে প্রসারিত করতে সহায়ক।justify-content: space-between;: এলিমেন্টগুলিকে একটি নির্দিষ্ট ব্যবধানে ছড়িয়ে দেওয়ার জন্য।
এই কোডে, তিনটি এলিমেন্টের উচ্চতা এবং প্রস্থ একে অপরের সমান হবে এবং তারা flex-grow এর মাধ্যমে একে অপরকে পূর্ণ করবে।
5. Flexbox Layout with Nested Items
Flexbox দিয়ে আপনি নেস্টেড (nested) এলিমেন্টের জন্যও লেআউট তৈরি করতে পারেন। এটি বিভিন্ন উপাদানকে একাধিক স্তরে সাজাতে সাহায্য করে।
Nested Flexbox Layout Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/pure-min.css">
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
background-color:
#4CAF50; color: white; text-align: center; padding: 20px; width: 30%; }
.nested-container {
display: flex;
flex-direction: column;
}
.nested-item {
background-color: #555;
color: white;
padding: 10px;
margin: 5px;
}
ব্যাখ্যা:
.nested-container: নেস্টেড ফ্লেক্স কন্টেইনার তৈরি করা হয়েছে।.nested-item: নেস্টেড আইটেমগুলোকে কলামে সাজানো হয়েছে।
এই উদাহরণটি nested flex items নিয়ে কাজ করছে, যেখানে প্রতিটি প্রধান ফ্লেক্স আইটেমের মধ্যে আরও ছোট ফ্লেক্স আইটেম রয়েছে।
Pure.CSS এর মাধ্যমে Flexbox Layouts তৈরি করা খুবই সহজ এবং কার্যকর। আপনি flex-direction, justify-content, align-items, flex-grow এবং অন্যান্য Flexbox প্রোপার্টি ব্যবহার করে যেকোনো ধরনের লেআউট তৈরি করতে পারেন। এটি দ্রুত এবং ফ্লেক্সিবল ডিজাইন তৈরির জন্য একটি শক্তিশালী টুল। Flexbox দিয়ে তৈরি লেআউটগুলি রেসপন্সিভ, ফ্লেক্সিবল এবং মোবাইল-ফ্রেন্ডলি হয়।
Read more
