Flexbox এর সাথে Common Layout Patterns

Flexbox হল CSS-এর একটি অত্যন্ত শক্তিশালী লেআউট মডেল যা ওয়েব ডিজাইনে সাধারণ এবং জটিল লেআউট ডিজাইন করতে ব্যবহার করা হয়। এটি বিভিন্ন কমন লেআউট প্যাটার্ন তৈরি করতে সহায়ক। Flexbox ব্যবহার করে বিভিন্ন ধরনের লেআউট তৈরি করা সম্ভব যেমন: ন্যাভিগেশন বার, কার্ড লেআউট, সেন্টারিং, ওয়েবপেজের সাধারণ কন্টেন্ট এরিয়া ইত্যাদি।

এখানে Flexbox ব্যবহার করে কিছু সাধারণ লেআউট প্যাটার্নের উদাহরণ দেওয়া হল।

1. একক কলাম লেআউট (Single Column Layout)

এটি একক কলামে কন্টেন্ট সাজানোর একটি সাধারণ প্যাটার্ন, যেখানে উপাদানগুলো একে অপরের নিচে সাজানো হয়। এটি মূলত মোবাইল বা ছোট স্ক্রীনের জন্য উপযুক্ত।

উদাহরণ:

<div class="flex-container">
  <div class="flex-item">Header</div>
  <div class="flex-item">Main Content</div>
  <div class="flex-item">Footer</div>
</div>

.flex-container {
  display: flex;
  flex-direction: column;  /* উল্লম্বভাবে আইটেমগুলো সাজাবে */
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}

আউটপুট:
একটি সোজা একক কলাম লেআউট হবে, যেখানে 'Header', 'Main Content', এবং 'Footer' একে অপরের নিচে সজ্জিত হবে।

2. নেভিগেশন বার লেআউট (Navigation Bar Layout)

এই লেআউটটি ওয়েবসাইটের নেভিগেশন বার তৈরিতে ব্যবহৃত হয়। Flexbox ব্যবহার করে নেভিগেশন আইটেমগুলোকে এক লাইনে এবং সমানভাবে বিতরণ করা সম্ভব।

উদাহরণ:

<div class="navbar">
  <div class="nav-item">Home</div>
  <div class="nav-item">About</div>
  <div class="nav-item">Services</div>
  <div class="nav-item">Contact</div>
</div>

.navbar {
  display: flex;
  justify-content: space-around; /* আইটেমগুলোর মধ্যে সমান জায়গা */
  background-color: #333;
  padding: 10px;
}

.nav-item {
  color: white;
  text-align: center;
  padding: 10px 20px;
  background-color: teal;
  border-radius: 5px;
}

আউটপুট:
নেভিগেশন বার আইটেমগুলো অনুভূমিকভাবে সমানভাবে বিতরণ হবে।

3. কার্ড লেআউট (Card Layout)

কার্ড লেআউট সাধারণত ওয়েবপেজের মধ্যে বিভিন্ন ধরনের কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়, যেখানে একাধিক কার্ড একসাথে প্রদর্শিত হয়। Flexbox ব্যবহার করে সহজেই এই ধরনের লেআউট তৈরি করা সম্ভব।

উদাহরণ:

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: flex;
  flex-wrap: wrap;  /* একাধিক লাইনে কার্ডগুলো প্রদর্শিত হবে */
  gap: 20px;
}

.card {
  flex: 1 0 21%; /* প্রতিটি কার্ডের প্রাথমিক আকার 21% */
  padding: 20px;
  background-color: lightblue;
  text-align: center;
  border: 1px solid #ccc;
}

আউটপুট:
কার্ডগুলো একটি রেস্পন্সিভ লেআউট হিসেবে একাধিক লাইনে বিভক্ত হবে এবং একটি সুন্দর, সমানভাবে বিতরণ করা লেআউট তৈরি হবে।

4. ফ্লেক্স গ্রিড লেআউট (Flex Grid Layout)

Flexbox ব্যবহার করে গ্রিড লেআউট তৈরি করা সম্ভব যেখানে আইটেমগুলো সমানভাবে বিভক্ত হবে এবং পর্দার আকার অনুযায়ী সামঞ্জস্য হবে। এটি সাধারণত রেস্পন্সিভ ওয়েব ডিজাইনে ব্যবহৃত হয়।

উদাহরণ:

<div class="flex-grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.flex-grid {
  display: flex;
  flex-wrap: wrap; /* একাধিক লাইনে আইটেমগুলো যাবে */
  gap: 10px;
}

.grid-item {
  flex: 1 0 30%;  /* আইটেমের প্রাথমিক আকার 30% */
  padding: 20px;
  background-color: lightcoral;
  text-align: center;
  border: 1px solid #ccc;
}

আউটপুট:
এই লেআউটে ৩টি উপাদান প্রতি লাইনে থাকবে এবং পর্দার আকার অনুযায়ী রেস্পন্সিভভাবে এগুলোর বিন্যাস পরিবর্তিত হবে।

5. সেন্টারিং লেআউট (Centering Layout)

Flexbox-এ উপাদানগুলোকে সঠিকভাবে অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রভূত করা খুবই সহজ। এটি অনেক ওয়েব ডিজাইনে প্রাথমিকভাবে ব্যবহৃত হয়।

উদাহরণ:

<div class="flex-container">
  <div class="flex-item">Centered Item</div>
</div>

.flex-container {
  display: flex;
  justify-content: center; /* অনুভূমিকভাবে কেন্দ্র */
  align-items: center; /* উল্লম্বভাবে কেন্দ্র */
  height: 100vh; /* পুরো পর্দার উচ্চতা */
}

.flex-item {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
}

আউটপুট:
এই লেআউটের মধ্যে উপাদানটি পুরো স্ক্রীনের কেন্দ্রে সজ্জিত হবে।

6. ফুটার লেআউট (Footer Layout)

এটি সাধারণত ওয়েবপেজের নিচের অংশে ফুটার তৈরি করতে ব্যবহৃত হয়, যেখানে আইটেমগুলো অনুভূমিকভাবে বা উল্লম্বভাবে বিন্যস্ত হতে পারে।

উদাহরণ:

<div class="footer">
  <div class="footer-item">© 2024</div>
  <div class="footer-item">Privacy Policy</div>
  <div class="footer-item">Contact Us</div>
</div>

.footer {
  display: flex;
  justify-content: space-between; /* সমানভাবে স্থান বিতরণ */
  background-color: #333;
  color: white;
  padding: 10px;
}

.footer-item {
  padding: 5px;
}

আউটপুট:
ফুটার আইটেমগুলো অনুভূমিকভাবে সমানভাবে বিতরণ হবে এবং স্ক্রীনের নিচে থাকবে।

সারাংশ

Flexbox লেআউট সিস্টেম একটি অত্যন্ত শক্তিশালী টুল যা বিভিন্ন ধরনের লেআউট প্যাটার্ন তৈরি করতে ব্যবহার করা যায়। এই প্যাটার্নগুলোর মধ্যে রয়েছে:

• একক কলাম লেআউট
• নেভিগেশন বার
• কার্ড লেআউট
• ফ্লেক্স গ্রিড
• সেন্টারিং
• ফুটার লেআউট

Flexbox-এ এই ধরনের লেআউট প্যাটার্ন তৈরি করা সহজ এবং এটি রেস্পন্সিভ ওয়েব ডিজাইনের জন্য খুবই উপকারী।

Flexbox ব্যবহার করে একটি আধুনিক এবং রেস্পন্সিভ ন্যাভিগেশন বার (Navbar) তৈরি করা সহজ। Flexbox-এর শক্তিশালী গঠন এবং বিন্যাস নিয়ন্ত্রণ ক্ষমতার মাধ্যমে সহজেই অনুভূমিক ও উল্লম্বভাবে সজ্জিত ন্যাভিগেশন তৈরি করা সম্ভব। নীচে Flexbox দিয়ে একটি ন্যাভিগেশন বার তৈরির উদাহরণ দেওয়া হলো।

HTML গঠন

<nav class="navbar">
  <div class="logo">
    <a href="#">My Logo</a>
  </div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="menu-icon">
    <span>☰</span> <!-- Hamburger Icon -->
  </div>
</nav>

CSS (Flexbox দিয়ে Navbar ডিজাইন)

/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* Navbar Styling */
.navbar {
  display: flex; /* Flexbox সক্রিয় */
  justify-content: space-between; /* আইটেমগুলোকে দুই প্রান্তে রাখবে */
  align-items: center; /* ভেতরের আইটেমগুলোকে উল্লম্বভাবে সেন্টার করবে */
  background-color: #333; /* Navbar এর ব্যাকগ্রাউন্ড কালার */
  padding: 10px 20px;
}

.navbar .logo a {
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  list-style: none; /* লিস্ট আইটেমগুলোর ডিফল্ট পয়েন্ট বাদ দেওয়া */
  display: flex; /* Flexbox ব্যবহার */
}

.nav-links li {
  margin: 0 15px; /* আইটেমগুলোর মধ্যে জায়গা */
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  padding: 8px 16px;
  transition: background-color 0.3s ease;
}

.nav-links a:hover {
  background-color: #575757; /* Hover করলে ব্যাকগ্রাউন্ড পরিবর্তন */
}

.menu-icon {
  display: none; /* মোবাইল ভিউতে initially hidden */
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Media Query for Mobile */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* মোবাইল স্ক্রীনে লিস্ট হাইড হবে */
    flex-direction: column; /* আইটেমগুলো উল্লম্বভাবে সাজানো হবে */
    width: 100%;
    background-color: #333; /* ব্যাকগ্রাউন্ড */
  }

  .nav-links.active {
    display: flex; /* ক্লিক করলে লিস্ট দৃশ্যমান হবে */
  }

  .menu-icon {
    display: block; /* মোবাইলে মেনু আইকন দেখা যাবে */
  }
}

JavaScript (Hamburger Menu Toggle)

const menuIcon = document.querySelector('.menu-icon');
const navLinks = document.querySelector('.nav-links');

menuIcon.addEventListener('click', () => {
  navLinks.classList.toggle('active'); // মেনুতে 'active' ক্লাস যোগ অথবা মুছে দিবে
});

ব্যাখ্যা:

• Flexbox Layout:
  • .navbar ক্লাসে display: flex; ব্যবহার করা হয়েছে, যাতে logo, nav-links এবং menu-icon ফ্লেক্স আইটেম হিসেবে সাজানো হয়। justify-content: space-between; ব্যবহার করা হয়েছে যাতে ন্যাভবারের এক পাশের আইটেমগুলো অন্য পাশের আইটেমগুলো থেকে আলাদা থাকে এবং align-items: center; আইটেমগুলোকে উল্লম্বভাবে কেন্দ্রিত করবে।
• Navbar Links:
  • .nav-links কে Flexbox দিয়ে অনুভূমিকভাবে সাজানো হয়েছে। প্রত্যেকটি <li> আইটেমের মধ্যে একটি <a> ট্যাগ রয়েছে, যা ন্যাভিগেশন লিঙ্ক হিসেবে কাজ করছে।
  • .nav-links a:hover স্টাইলটি ব্যবহারকারীর হোভার করার সময় ব্যাকগ্রাউন্ড পরিবর্তন করতে সাহায্য করবে।
• Mobile Responsiveness:
  • @media (max-width: 768px) মিডিয়া কুয়েরি ব্যবহার করে মোবাইল ভিউয়ের জন্য ন্যাভবারের লেআউট পরিবর্তন করা হয়েছে। মোবাইল স্ক্রীনে ন্যাভিগেশন লিঙ্কগুলো একটি কলামে সাজানো হবে এবং display: none; দিয়ে লিস্টটি প্রথমে লুকানো থাকবে।
  • menu-icon ক্লাসে একটি হ্যামবার্গার আইকন (☰) ব্যবহার করা হয়েছে, যা মোবাইল স্ক্রীনে দেখা যাবে এবং এটি ক্লিক করার মাধ্যমে ন্যাভিগেশন লিঙ্কগুলো চালু বা বন্ধ হবে। JavaScript এর মাধ্যমে active ক্লাসটি nav-links-এ যোগ বা মুছে দেওয়া হবে, যাতে ন্যাভিগেশন মেনু মোবাইলে টগল করতে পারে।

ফলস্বরূপ (Result):

1. ডেস্কটপ ভিউ: ন্যাভবারের আইটেমগুলো অনুভূমিকভাবে এক লাইনে সাজানো থাকবে এবং হ্যামবার্গার মেনু আইকনটি দেখা যাবে না।
2. মোবাইল ভিউ: স্ক্রীনের আকার ছোট হলে, ন্যাভবারের আইটেমগুলো এক কলামে সজ্জিত হবে এবং হ্যামবার্গার মেনু আইকনটি দেখা যাবে। ব্যবহারকারী যখন মেনু আইকনে ক্লিক করবে, তখন ন্যাভিগেশন লিঙ্কগুলো দৃশ্যমান হবে।

সারাংশ

Flexbox ব্যবহার করে একটি আধুনিক এবং রেস্পন্সিভ ন্যাভবার তৈরি করা সহজ। display: flex; দিয়ে ফ্লেক্স কনটেইনার তৈরি করে, flex-direction প্রপার্টি দিয়ে আইটেমগুলোর বিন্যাস নিয়ন্ত্রণ এবং flex-wrap ব্যবহার করে রেস্পন্সিভ ডিজাইন তৈরি করা যায়। JavaScript দিয়ে মোবাইল ভিউতে হ্যামবার্গার মেনু টগল করার ব্যবস্থা করলে ডিজাইনটি আরও ইন্টারঅ্যাকটিভ হয়ে ওঠে।

Flexbox ব্যবহার করে Sidebar এবং Content Layout তৈরি করা খুবই সহজ এবং কার্যকরী। এখানে Flexbox এর সাহায্যে একটি সাধারণ Sidebar এবং Content Layout তৈরি করার প্রক্রিয়া দেখানো হলো। আমরা Sidebar কে কন্টেইনারের বাম দিকে এবং Content Area কে ডান দিকে অবস্থান করাবো।

HTML স্ট্রাকচার

<div class="flex-container">
  <div class="sidebar">
    <h2>Sidebar</h2>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>

  <div class="content">
    <h1>Main Content</h1>
    <p>This is the content section. You can place your main content here.</p>
  </div>
</div>

CSS স্টাইলিং

/* Flexbox Container */
.flex-container {
  display: flex;              /* Flexbox সক্রিয় */
  height: 100vh;              /* সম্পূর্ণ ভিউপোর্টের উচ্চতা */
}

/* Sidebar */
.sidebar {
  background-color: #f4f4f4;
  width: 250px;               /* Sidebar এর প্রস্থ */
  padding: 20px;
}

.sidebar h2 {
  text-align: center;
}

/* Content */
.content {
  background-color: #fff;
  flex-grow: 1;               /* Content Area অধিক স্থান দখল করবে */
  padding: 20px;
}

/* Sidebar Links */
.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  margin: 10px 0;
}

.sidebar ul li a {
  text-decoration: none;
  color: #333;
}

ব্যাখ্যা:

1. flex-container:
   • display: flex; দ্বারা Flexbox সক্রিয় করা হয়েছে, যাতে Sidebar এবং Content দুইটি Flex Item হিসেবে আচরণ করবে।
   • height: 100vh; দিয়ে কন্টেইনারের উচ্চতা পূর্ণ স্ক্রীন হবে (100% ভিউপোর্ট উচ্চতা)।
2. sidebar:
   • width: 250px; দ্বারা Sidebar এর প্রস্থ নির্ধারণ করা হয়েছে।
   • padding: 20px; দ্বারা Sidebar এর মধ্যে কিছু জায়গা রাখা হয়েছে।
   • Sidebar টেক্সট এবং লিংকগুলো কেন্দ্রিত করা হয়েছে।
3. content:
   • flex-grow: 1; Content Area-কে Sidebar-এর পর অবশিষ্ট জায়গা দখল করতে বলেছে।
   • padding: 20px; Content এর ভিতরের জায়গা নির্ধারণ করা হয়েছে।
4. Responsive Layout: Flexbox স্বাভাবিকভাবেই রেস্পন্সিভ। যদি স্ক্রীনের আকার ছোট হয়, তাহলে Sidebar এবং Content স্বয়ংক্রিয়ভাবে একে অপরের সাথে উপযুক্ত জায়গায় বিন্যস্ত হবে।

Responsive Design (Media Queries)

ফোন বা ছোট স্ক্রীনে Sidebar এবং Content লেআউটকে আরো উপযুক্ত করতে Media Queries ব্যবহার করা যেতে পারে।

@media (max-width: 768px) {
  .flex-container {
    flex-direction: column;   /* ছোট স্ক্রীনে Sidebar এবং Content একের পর এক থাকবে */
  }

  .sidebar {
    width: 100%;              /* Sidebar পূর্ণ প্রস্থ নিবে */
  }
}

এই কোডটি স্ক্রীনের আকার 768px বা তার কম হলে, Sidebar এবং Content কে উল্লম্বভাবে (column) সাজিয়ে দিবে। Sidebar পুরো প্রস্থ নিবে।

সারাংশ:

Flexbox ব্যবহার করে Sidebar এবং Content Layout তৈরি করা সহজ এবং নমনীয়। এখানে Sidebar স্থির প্রস্থ নিয়ে বামে এবং Content এলাকা ডানে থাকছে। Flexbox এর flex-grow, display: flex; প্রপার্টি দ্বারা Content Area কে কন্টেইনারের বাকি জায়গা দখল করতে দেয়া হয়েছে, এবং Media Queries এর মাধ্যমে রেস্পন্সিভ ডিজাইনও সঠিকভাবে তৈরি করা হয়েছে।

Flexbox ব্যবহার করে আপনি সহজে Card Layout এবং Gallery Layout তৈরি করতে পারেন। Flexbox-এ যেহেতু উপাদানগুলোর বিন্যাস এবং স্থান ব্যবস্থাপনা সহজে নিয়ন্ত্রণ করা যায়, তাই এটি এসব লেআউট ডিজাইনে খুবই কার্যকর।

Card Layout তৈরি (Flexbox)

Card Layout এমন একটি ডিজাইন যেখানে প্রতিটি আইটেম (কার্ড) কিছু তথ্য বা চিত্র প্রদর্শন করে। Flexbox ব্যবহার করে আপনি সহজেই একাধিক কার্ডকে একসাথে সজ্জিত করতে পারেন, এবং প্রয়োজনে রেস্পন্সিভ ডিজাইনও তৈরি করতে পারবেন।

HTML:

<div class="card-container">
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <h3>Card 1</h3>
    <p>This is a description of Card 1.</p>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <h3>Card 2</h3>
    <p>This is a description of Card 2.</p>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <h3>Card 3</h3>
    <p>This is a description of Card 3.</p>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Card Image">
    <h3>Card 4</h3>
    <p>This is a description of Card 4.</p>
  </div>
</div>

CSS:

.card-container {
  display: flex;
  flex-wrap: wrap;         /* একাধিক লাইনে সজ্জিত হবে */
  justify-content: space-around; /* সমান জায়গায় বিতরণ হবে */
  gap: 20px;              /* কার্ডগুলোর মধ্যে ফাঁকা জায়গা */
}

.card {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 250px;           /* প্রতি কার্ডের প্রস্থ */
  padding: 15px;
  text-align: center;
}

.card img {
  width: 100%;           /* চিত্রের প্রস্থ */
  border-radius: 8px;
}

.card h3 {
  margin-top: 10px;
}

.card p {
  margin-top: 5px;
}

ব্যাখ্যা:

• flex-wrap: wrap;: Flex Items (কার্ড) একাধিক লাইনে সজ্জিত হবে।
• justify-content: space-around;: কার্ডগুলোর মধ্যে সমান জায়গা থাকবে।
• gap: আইটেমগুলোর মধ্যে ফাঁকা জায়গা যোগ করে।

Gallery Layout তৈরি (Flexbox)

Gallery Layout সাধারণত চিত্র বা ছবি প্রদর্শনের জন্য ব্যবহৃত হয়। Flexbox ব্যবহার করে আপনি সহজেই একটি গ্যালারি ডিজাইন করতে পারেন, যেখানে চিত্রগুলো উপযুক্ত স্থান এবং আকারে সজ্জিত হবে।

HTML:

<div class="gallery">
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 1">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 2">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 3">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 4">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 5">
  </div>
  <div class="gallery-item">
    <img src="https://via.placeholder.com/300" alt="Gallery Image 6">
  </div>
</div>

CSS:

.gallery {
  display: flex;
  flex-wrap: wrap;        /* একাধিক লাইনে ছবি সজ্জিত হবে */
  justify-content: space-between; /* ছবি গুলো সমান জায়গায় বিতরণ হবে */
  gap: 20px;             /* ছবির মধ্যে ফাঁকা জায়গা */
}

.gallery-item {
  flex: 1 1 30%;          /* প্রতিটি ছবির জন্য 30% জায়গা বরাদ্দ হবে */
  max-width: 300px;       /* ছবি সাইজ সীমিত হবে */
}

.gallery-item img {
  width: 100%;
  height: auto;           /* চিত্রের প্রস্থ অনুযায়ী উচ্চতা নিয়ন্ত্রণ হবে */
  border-radius: 8px;
}

ব্যাখ্যা:

• flex-wrap: wrap;: গ্যালারির আইটেমগুলি একাধিক লাইনে বিভক্ত হবে।
• justify-content: space-between;: ছবিগুলোর মধ্যে সমান দূরত্ব থাকবে।
• flex: 1 1 30%;: প্রতিটি ছবি এক লাইনে 30% জায়গা নেবে, কিন্তু বড় স্ক্রীনে তাদের আকার পরিবর্তিত হবে।
• gap: ছবিগুলোর মধ্যে জায়গা রাখবে।

রেস্পন্সিভ ডিজাইন (Card Layout এবং Gallery Layout)

Flexbox ব্যবহার করে সহজেই রেস্পন্সিভ ডিজাইন তৈরি করা যায়। এক্সাম্পল হিসেবে, আপনি ছোট স্ক্রীনে একে একে আইটেমগুলো প্রদর্শন করতে পারেন এবং বড় স্ক্রীনে তাদেরকে একাধিক কলামে সজ্জিত করতে পারেন।

Responsive Card Layout CSS:

@media (max-width: 768px) {
  .card-container {
    justify-content: center;
  }
  .card {
    width: 100%;  /* মোবাইল স্ক্রীনে প্রতিটি কার্ড পুরো প্রস্থ নিবে */
  }
}

Responsive Gallery Layout CSS:

@media (max-width: 768px) {
  .gallery-item {
    flex: 1 1 100%;  /* মোবাইল স্ক্রীনে প্রতিটি ছবি পুরো প্রস্থ নিবে */
  }
}

সারাংশ

• Card Layout এবং Gallery Layout Flexbox ব্যবহার করে সহজেই ডিজাইন করা যায়, যেখানে Flexbox এর flex-wrap, justify-content, এবং gap প্রপার্টি গুলি গুরুত্বপূর্ণ ভূমিকা পালন করে।
• Flexbox এর মাধ্যমে লেআউট সিস্টেমে অনেক নমনীয়তা পাওয়া যায় এবং এটি রেস্পন্সিভ ডিজাইন তৈরিতে সহায়ক।
• আপনি flex-wrap প্রপার্টি ব্যবহার করে আইটেমগুলোকে একাধিক লাইনে সজ্জিত করতে পারেন, যা বিভিন্ন স্ক্রীন সাইজে উপাদানগুলোর স্থান সামঞ্জস্য করতে সাহায্য করে।

Flexbox লেআউট মডিউলটি ওয়েব ডিজাইনে Vertical Centering (উল্লম্বভাবে কেন্দ্রীভূত করা) খুব সহজ করে তোলে। প্রাচীন CSS পদ্ধতিগুলোর তুলনায় Flexbox ব্যবহার করে উপাদানগুলোকে উল্লম্বভাবে এবং অনুভূমিকভাবে সহজে কেন্দ্রীভূত করা যায়, যা রেস্পন্সিভ ডিজাইন তৈরিতে সহায়ক।

Vertical Centering (উল্লম্বভাবে কেন্দ্রীভূত করা) এর জন্য Flexbox ব্যবহার

Flexbox-এর align-items এবং justify-content প্রপার্টি ব্যবহার করে উপাদানগুলোকে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত করা সম্ভব।

1. Flex Container-এর জন্য display: flex ব্যবহার:

Flexbox সক্রিয় করার জন্য প্রথমে ফ্লেক্স কন্টেইনারের জন্য display: flex; প্রপার্টি ব্যবহার করতে হবে।

2. align-items: center; দিয়ে উল্লম্বভাবে কেন্দ্র করা:

align-items: center; প্রপার্টি Flex Items-কে Flex Container-এর উল্লম্ব কেন্দ্রে স্থাপন করে। এটি উপাদানগুলোকে কন্টেইনারের উচ্চতার মধ্যে সমানভাবে বিতরণ করে।

3. justify-content: center; দিয়ে অনুভূমিকভাবে কেন্দ্র করা:

justify-content: center; প্রপার্টি Flex Items-কে Flex Container-এর অনুভূমিক কেন্দ্রে স্থাপন করে। এটি উপাদানগুলোকে কন্টেইনারের প্রস্থের মধ্যে সমানভাবে বিতরণ করে।

উল্লম্বভাবে এবং অনুভূমিকভাবে কেন্দ্রীভূত করার জন্য Flexbox ব্যবহার:

HTML:

<div class="flex-container">
  <div class="flex-item">Centered Item</div>
</div>

CSS:

.flex-container {
  display: flex;
  justify-content: center;  /* অনুভূমিকভাবে কেন্দ্র */
  align-items: center;      /* উল্লম্বভাবে কেন্দ্র */
  height: 100vh;            /* কন্টেইনারের উচ্চতা 100% ভিউপোর্টের */
  background-color: lightgray; /* কন্টেইনারের ব্যাকগ্রাউন্ড */
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
}

ব্যাখ্যা:

1. display: flex;: এটি Flexbox লেআউট সক্রিয় করে এবং কন্টেইনারকে Flex Container হিসেবে কাজ করতে দেয়।
2. justify-content: center;: এটি ফ্লেক্স আইটেমকে অনুভূমিকভাবে (হরাইজন্টালি) কন্টেইনারের মধ্যে কেন্দ্রীভূত করে।
3. align-items: center;: এটি ফ্লেক্স আইটেমকে উল্লম্বভাবে (ভ্যারটিক্যালি) কন্টেইনারের মধ্যে কেন্দ্রীভূত করে।
4. height: 100vh;: এটি Flex Container এর উচ্চতা 100vh (ভিউপোর্টের উচ্চতা) সেট করে, যাতে ফ্লেক্স আইটেম পুরো পর্দায় সঠিকভাবে কেন্দ্রীভূত হয়।

ফলস্বরূপ আউটপুট:

ফ্লেক্স আইটেমটি পুরো পর্দার মধ্যে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত হবে।

আরও কিছু উদাহরণ:

1. Multiple Items-কে Vertical and Horizontal Centering:

যখন একাধিক ফ্লেক্স আইটেমকে কেন্দ্র করতে চান, তখনও Flexbox ব্যবহার করে খুব সহজেই তা করা সম্ভব।

HTML:

<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>

CSS:

.flex-container {
  display: flex;
  justify-content: center;  /* অনুভূমিকভাবে কেন্দ্র */
  align-items: center;      /* উল্লম্বভাবে কেন্দ্র */
  height: 100vh;
  gap: 20px;                /* আইটেমগুলোর মধ্যে ফাঁকা জায়গা */
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
}

ব্যাখ্যা:

এই কোডে তিনটি ফ্লেক্স আইটেম রয়েছে, এবং Flexbox তাদেরকে উল্লম্ব ও অনুভূমিকভাবে কেন্দ্র করবে। gap: 20px; প্রপার্টি আইটেমগুলোর মধ্যে ২০ পিক্সেল দূরত্ব রাখবে।

কেন Flexbox Vertical Centering সবচেয়ে ভালো পদ্ধতি?

1. সহজ ব্যবহার:
   Flexbox এর মাধ্যমে Vertical Centering একটি অত্যন্ত সহজ এবং কার্যকর পদ্ধতি। পূর্ববর্তী CSS পদ্ধতিগুলোর তুলনায় এটি অনেক সহজ ও দ্রুত কাজ করে।
2. রেস্পন্সিভ ডিজাইন:
   Flexbox স্বয়ংক্রিয়ভাবে উপাদানগুলোকে কন্টেইনারের মধ্যে কেন্দ্রীভূত রাখে, যা রেস্পন্সিভ ডিজাইন তৈরিতে সহায়ক।
3. এডজাস্টেবল এবং নমনীয়:
   Flexbox-এর justify-content এবং align-items প্রপার্টি ব্যবহার করে আপনি উপাদানগুলোকে সহজেই কোনো নির্দিষ্ট অবস্থানে সরিয়ে নিতে পারেন, এবং এতে কোনো অতিরিক্ত কৌশল ব্যবহারের প্রয়োজন হয় না।

সারাংশ

Flexbox ব্যবহার করে Vertical Centering করা খুব সহজ এবং কার্যকরী। justify-content: center; এবং align-items: center; ব্যবহার করে আপনি ফ্লেক্স আইটেমগুলোকে Flex Container-এর মধ্যে উল্লম্ব এবং অনুভূমিকভাবে কেন্দ্রীভূত করতে পারেন। এটি রেস্পন্সিভ ডিজাইনে অত্যন্ত সহায়ক এবং ওয়েব পেজ ডিজাইনকে নমনীয় এবং সুন্দরভাবে সাজাতে সাহায্য করে।