Flexbox (ফ্লেক্সবক্স), যা Flexible Box Layout নামে পরিচিত, একটি CSS লেআউট মডেল যা ওয়েব পেজে উপাদানগুলির মধ্যে স্থান এবং বিন্যাস সহজেই নিয়ন্ত্রণ করতে সহায়তা করে। Flexbox ব্যবহারে আপনি উপাদানগুলিকে সারি বা কলামে সাজাতে, তাদের মধ্যে সমান স্থান দিতে, এবং বিভিন্ন স্ক্রীন সাইজের জন্য রেসপন্সিভ ডিজাইন তৈরি করতে পারেন। এটি ওয়েব ডিজাইনের সবচেয়ে শক্তিশালী এবং ফ্লেক্সিবল (নমনীয়) টুলগুলির একটি।
Pure.CSS একটি লাইটওয়েট এবং মিনিমালিস্ট CSS ফ্রেমওয়ার্ক, যা সহজে ওয়েব অ্যাপ্লিকেশন ডিজাইন করতে সহায়তা করে। যদিও Pure.CSS নিজে কোনো বিশেষ Flexbox সিস্টেম অন্তর্ভুক্ত করে না, তবুও এটি Flexbox এর সাথে পুরোপুরি ইন্টিগ্রেট করা যায়।
Flexbox কী এবং এর সুবিধাসমূহ:
Flexbox একটি এক্সটেনসিভ লেআউট সিস্টেম যা মূলত দুটি অংশে বিভক্ত:
- Flex Container: এটি সেই কন্টেইনার যা ফ্লেক্স আইটেমগুলিকে ধারণ করে।
- Flex Items: ফ্লেক্স কন্টেইনারের ভিতরের আইটেমগুলি যেগুলি ফ্লেক্সবক্সে অ্যালাইন (align) এবং সাজানো (justify) হয়।
Flexbox এর কিছু সুবিধা:
- নমনীয় লেআউট: উপাদানগুলির মধ্যে গ্যাপ এবং স্পেসিং স্বয়ংক্রিয়ভাবে সামঞ্জস্যপূর্ণ হয়, যা লেআউটকে আরও প্রোগ্রামযোগ্য এবং কাস্টমাইজযোগ্য করে তোলে।
- এলার্নিং এবং প্রয়োগে সহজ: Flexbox খুব সহজে অ্যাপ্লাই করা যায়, এবং এটি বিভিন্ন ডিভাইসে রেসপন্সিভ লেআউট তৈরি করতে সহায়তা করে।
- উপাদানের অ্যালাইনমেন্ট: উপাদানগুলি অনুভূমিক বা উল্লম্বভাবে অ্যালাইন করা সহজ।
- ওভারফ্লো কন্ট্রোল: Flexbox এর মাধ্যমে আপনি সহজে কন্টেইনারের মধ্যে উপাদানগুলোকে অপ্রয়োজনীয়ভাবে পুশ করতে পারেন এবং স্ক্রীন সাইজ পরিবর্তিত হলে উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে পারেন।
Pure.CSS এর সাথে Flexbox এর Integration
যদিও Pure.CSS নিজে কোনো ফ্লেক্সবক্স ক্লাস সরবরাহ করে না, তবে Pure.CSS এর গ্রিড সিস্টেম এবং কাস্টম স্টাইলের সাথে Flexbox এর ইন্টিগ্রেশন সহজেই করা সম্ভব।
1. Flexbox এর জন্য Flex Container ও Flex Items তৈরি করা
Pure.CSS এর .pure-g এবং .pure-u- classes* ফ্লেক্সবক্সের মত কাজ করতে পারে, তবে এখানে Flexbox এর শক্তিশালী কন্ট্রোলের জন্য কিছু কাস্টম স্টাইল করা যাবে।
Flexbox Container এবং 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">
<title>Flexbox with Pure.CSS</title>
<style>
/* Flex Container */
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #f4f4f4;
}
/* Flex Items */
.flex-item {
background-color: #4CAF50;
padding: 20px;
color: white;
margin: 10px;
flex-grow: 1;
text-align: center;
}
/* Ensuring Flexbox behavior on smaller screens */
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
</style>
</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: এটি flex-container ক্লাসের জন্য একটি ফ্লেক্স কন্টেইনার তৈরি করে।justify-content: space-between: এটি উপাদানগুলির মধ্যে স্থান সুষমভাবে বিতরণ করে।align-items: center: এটি উপাদানগুলিকে উল্লম্বভাবে কেন্দ্রিত করে।flex-grow: 1: ফ্লেক্স আইটেমকে উল্লম্বভাবে প্রসারিত হতে দেয় এবং বাকি প্রস্থটি গ্রহন করে।@media: এটি স্ক্রীন সাইজ 600px এর কম হলে ফ্লেক্স কন্টেইনারের ভিতরের আইটেমগুলিকে কলাম আকারে সাজানোর জন্য ব্যবহৃত হয়েছে।
এটি একটি রেসপন্সিভ ফ্লেক্সবক্স লেআউট তৈরি করে, যেখানে Flex Items স্ক্রীন সাইজের উপর ভিত্তি করে সজ্জিত হয়।
2. Flexbox এর মাধ্যমে Vertical and Horizontal Alignment
Flexbox এর মাধ্যমে আপনি উপাদানগুলিকে অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রিত করতে পারেন।
Example: Centering Elements Vertically and Horizontally
<!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">
<title>Centering with Flexbox</title>
<style>
.flex-center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Full height of the viewport */
background-color: #e0e0e0;
}
.flex-center-item {
padding: 20px;
background-color: #007bff;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-center-container">
<div class="flex-center-item">Centered Item</div>
</div>
</body>
</html>
ব্যাখ্যা:
justify-content: center: এটি উপাদানগুলিকে অনুভূমিকভাবে কেন্দ্রিত করে।align-items: center: এটি উপাদানগুলিকে উল্লম্বভাবে কেন্দ্রিত করে।height: 100vh: এটি কন্টেইনারকে পুরো স্ক্রীনের উচ্চতায় প্রসারিত করে।
এটি একটি flexbox সেন্টারিং লেআউট তৈরি করে, যেখানে একক উপাদানটি পুরো স্ক্রীনে সেন্টার করা হবে।
3. Using Pure.CSS Grid System with Flexbox
Pure.CSS এর Grid System এবং Flexbox এর সংমিশ্রণ দিয়ে আরো উন্নত লেআউট তৈরি করা যেতে পারে। Pure.CSS এর Grid System হল ১২ কলামের একটি সিস্টেম, যেখানে flexbox এর শক্তি যোগ করে আরও ফ্লেক্সিবল এবং রেসপন্সিভ লেআউট তৈরি করা সম্ভব।
Grid System + Flexbox 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">
<title>Grid + Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
padding: 20px;
}
.pure-u-1-2 {
flex: 0 0 48%;
margin: 10px;
background-color: #f4f4f4;
padding: 20px;
}
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="flex-container">
<div class="pure-u-1-2">Flexbox + Grid Item 1</div>
<div class="pure-u-1-2">Flexbox + Grid Item 2</div>
</div>
</body>
</html>
ব্যাখ্যা:
- Flexbox সিস্টেমটি সোজা করে দিয়েছিল কলামগুলির জন্য স্থান এবং Pure.CSS Grid সিস্টেমটি ব্যবহার করে ফ্লেক্স আইটেমগুলির অবস্থান এবং সাইজ কন্ট্রোল করছে।
pure-u-1-2: এটি Flexbox এর মাধ্যমে নির্দিষ্ট সাইজে কলাম তৈরি করতে সহায়তা করে।
Flexbox এবং Pure.CSS একসাথে ব্যবহার করা একটি শক্তিশালী কৌশল, যেটি আপনার ওয়েব ডিজাইনকে আরও ফ্লেক্সিবল এবং রেসপন্সিভ করে তোলে। আপনি Pure.CSS এর গ্রিড সিস্টেমের সাথে Flexbox এর শক্তি ব্যবহার করে খুব সহজে এবং দ্রুত ডাইনামিক ওয়েব লেআউট তৈরি করতে পারবেন। Flexbox এর মাধ্যমে আপনি অনুভূমিক এবং উল্লম্বভাবে উপাদানগুলি অ্যালাইন এবং সেন্টার করতে পারেন, যা একটি অত্যন্ত শক্তিশালী ডিজাইন টুল।
Read more
