CSS এর হাতেখড়ি (পর্ব

আগের পর্বে আমরা Flexbox-এর বেসিক property গুলো শিখেছি — display: flex, justify-content, align-items, gap, flex-wrap। আজকে সেগুলো দিয়ে বাস্তব ওয়েবসাইটে যেসব layout সবচেয়ে বেশি লাগে, সেগুলো বানিয়ে দেখবো।

Layout ১: Navbar (লোগো বামে, মেনু ডানে)

প্রায় প্রতিটা ওয়েবসাইটের হেডারে এই প্যাটার্নটা থাকে — লোগো এক পাশে, নেভিগেশন লিংক অন্য পাশে। এর জন্য দুইটা জিনিস লাগবে: justify-content: space-between (দুইদিকে ছড়িয়ে দিতে) আর মেনুর লিংকগুলোর জন্য আরেকটা ছোট flex (পাশাপাশি সাজাতে)।

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #2c3e50;
}

.navbar .menu {
  display: flex;
  gap: 20px;
  list-style: none;
}

আমার ব্লগ

হোম সম্পর্কে যোগাযোগ

টিপস: justify-content: space-between শুধু তখনই কাজ করবে যখন কনটেইনারের ভেতরে দুই বা ততোধিক সরাসরি চাইল্ড থাকবে। এখানে navbar-এর দুইটা সরাসরি চাইল্ড আছে — লোগো আর মেনুর div, আর মেনুর ভেতরের লিংকগুলো একটা আলাদা নেস্টেড flex container।

Layout ২: Card Layout (প্রোডাক্ট গ্রিডের মতো)

একাধিক সমান-সাইজের কার্ড পাশাপাশি সাজাতে flex-wrap আর flex শর্টহ্যান্ড প্রপার্টি একসাথে কাজে লাগে:

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 200px;  /* grow shrink basis */
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
}

প্রোডাক্ট ১

প্রোডাক্ট ২

প্রোডাক্ট ৩

flex: 1 1 200px; এর মানে তিনটা জিনিস একসাথে বলা হয়েছে:

অংশ	কাজ
`flex-grow: 1`	অতিরিক্ত জায়গা থাকলে কার্ড বড় হয়ে সেই জায়গা নেয়
`flex-shrink: 1`	জায়গা কম পড়লে কার্ড ছোট হয়
`flex-basis: 200px`	শুরুতে প্রতিটা কার্ডের আদর্শ width ২০০px

টিপস: flex-wrap: wrap ছাড়া কার্ডগুলো ছোট স্ক্রিনে জোর করে গাদাগাদি করে এক লাইনেই থাকার চেষ্টা করবে। তাই responsive card layout-এ এই দুইটা একসাথেই ব্যবহার করা উচিত।

Layout ৩: পারফেক্ট সেন্টারিং

একটা এলিমেন্টকে (যেমন লগইন ফর্ম, লোডিং স্পিনার) পুরো পেজের মাঝখানে — উপর-নিচ, ডান-বাম দুইদিকেই — বসাতে Flexbox-এর চেয়ে সহজ উপায় নেই:

.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

আমি একদম মাঝখানে

height: 100vh মানে পুরো ব্রাউজার উইন্ডোর উচ্চতা (vh = viewport height)। এভাবেই লগইন পেজ, ৪০৪ error page ইত্যাদির কন্টেন্ট স্ক্রিনের মাঝখানে বসানো হয়।

Layout ৪: Sidebar + Main Content

একপাশে ছোট সাইডবার, অন্যপাশে বড় মূল কন্টেন্ট — ব্লগ বা ড্যাশবোর্ডে এটা খুব কমন:

.layout {
  display: flex;
  gap: 20px;
}

.sidebar {
  flex: 0 0 200px; /* কখনো বড়/ছোট হবে না, সবসময় ২০০px */
}

.main-content {
  flex: 1; /* বাকি সব জায়গা নিয়ে নেবে */
}

সাইডবার

মূল কন্টেন্ট (বাকি সব জায়গা)

টিপস: flex: 0 0 200px মানে grow=০, shrink=০ — এই এলিমেন্ট কখনো বড়/ছোট হবে না, সবসময় ঠিক ২০০px থাকবে। আর flex: 1 মানে বাকি যতটুকু জায়গা আছে সবটুকু এই এলিমেন্ট নিয়ে নেবে।

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Real-world Flexbox উদাহরণ</title>
  <style>
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: #2c3e50;
      color: white;
    }

    .navbar ul {
      display: flex;
      gap: 20px;
      list-style: none;
    }

    .layout {
      display: flex;
      gap: 20px;
      padding: 20px;
    }

    .sidebar {
      flex: 0 0 200px;
    }

    .main-content {
      flex: 1;
    }

    .card-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .card {
      flex: 1 1 150px;
      border: 1px solid #ddd;
      padding: 16px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="navbar">
    <span>আমার ব্লগ</span>
    <ul>
      <li>হোম</li>
      <li>সম্পর্কে</li>
    </ul>
  </div>

  <div class="layout">
    <div class="sidebar">সাইডবার</div>
    <div class="main-content">
      <div class="card-list">
        <div class="card">কার্ড ১</div>
        <div class="card">কার্ড ২</div>
      </div>
    </div>
  </div>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

একটা navbar বানাও, লোগো বামে ও তিনটা মেনু লিংক ডানে
চারটা কার্ড দিয়ে একটা flex-wrap করা grid বানাও
একটা div-কে height: 100vh দিয়ে পুরো স্ক্রিনের মাঝখানে একটা বাটন বসাও
একটা sidebar + main-content লেআউট বানাও, sidebar-এর width ফিক্সড রেখে

পরের পর্বে যা থাকছে

পর্ব ৮-এ আমরা শিখবো CSS Grid — Flexbox-এর মতোই আরেকটা শক্তিশালী layout system, যেটা দুই-মাত্রিক (row ও column একসাথে) লেআউটের জন্য বিশেষভাবে উপযোগী, উদাহরণসহ।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ

CSS এর হাতেখড়ি (পর্ব – ৭)