Flexbox দিয়ে Sidebar এবং Content Layout তৈরি

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 এর মাধ্যমে রেস্পন্সিভ ডিজাইনও সঠিকভাবে তৈরি করা হয়েছে।