Flexbox দিয়ে বাস্তব নকশা — navbar, কার্ড আর মাঝখানে বসানো

১ · তত্ত্ব থেকে কাজে — চারটি কৌশল, যা প্রায় সব নকশায় লাগে

পর্ব ২৫-এ আপনি Flexbox-এর ভেতরের নিয়ম শিখেছেন — flex container আর তার flex item, main axis আর cross axis, কে কতটা বাড়বে বা কমবে। নিয়মগুলো এখানে আবার শেখানো হবে না; দরকার হলে পর্ব ২৫ খুলে পাশে রাখুন। এই পর্বের কাজ উল্টো দিক থেকে: আমরা একটি বাস্তব নকশা দেখব, তারপর খুঁজব কোন দুই-তিনটি লাইন সেটি বানায়।

শেষেরটির পেছনের কারণ একটু লুকানো, তাই আগেই বলে রাখি। Flex item-এর min-width-এর ডিফল্ট মান 0 নয়, auto — মানে “content যতটা সরু হতে পারে, তার চেয়ে সরু হবে না”। একে বলে automatic minimum size. তাই একটি লম্বা লিংক থাকলে item আর ছোট হয় না, পুরো সারি পর্দার বাইরে বেরিয়ে যায়। অংশ ৯-এ এটি নিজের চোখে মেপে দেখব।

২ · নিখুঁতভাবে মাঝখানে — আড়াআড়ি আর খাড়া দুই দিকেই

“একটি div মাঝখানে কীভাবে বসাব?” — বহু বছর এটি ওয়েব ডেভেলপারদের সবচেয়ে বিখ্যাত ঠাট্টা ছিল। আড়াআড়ি মাঝখানে বসানো সহজ ছিল (margin: 0 auto), কিন্তু খাড়াভাবে মাঝখানে বসাতে লাগত টেবিল, negative margin বা transform-এর কৌশল (এর গল্প ভাবনার প্রশ্ন ১-এ)। Flexbox-এ দুটি উপায় আছে, আর দুটিই দুই-তিন লাইনের। লগইন বক্স, “লোড হচ্ছে” চিহ্ন, খালি তালিকার বার্তা, আইকনের ভেতরে অক্ষর — সব জায়গায় এটি লাগে।

.stage {
  height: 150px;
  margin-bottom: 12px;
  border: 2px dashed #789;
  background: #f1f5fb;
}
.badge {
  margin: 0;
  padding: 10px 16px;
  border-radius: 8px;
  background: #006a4e;
  color: white;
  font: bold 15px sans-serif;
}
/* উপায় ১: container দুই axis-এ সাজায় */
.flexbox {
  display: flex;
  justify-content: center;   /* main axis — আড়াআড়ি */
  align-items: center;       /* cross axis — খাড়া */
}
/* উপায় ২: item-এর চারদিকের auto margin */
.auto { display: flex; }
.auto .badge { margin: auto; }

একটি বিকল্পও জেনে রাখুন। CSS Grid-এ display: grid; place-items: center; লিখলেও একই কাজ হয় — পর্ব ২৭-এ দেখবেন। আর ২০২৪ সালে এসেছে আরও সহজ একটি রূপ: সাধারণ block বাক্সেই align-content: center খাড়াভাবে content মাঝখানে আনে, কোনো flex বা grid ছাড়াই। এটি Baseline Newly available — নতুন ব্রাউজারে চলে, পুরোনোতে উপেক্ষিত হয়; তাই পুরোনো ব্রাউজারের ব্যবহারকারী বেশি হলে এখনো flex-ই নিরাপদ।

৩ · Navbar — লোগো বাঁয়ে, লিংক ডানে, ছোট পর্দায় ভাঁজ

প্রায় প্রতিটি সাইটের মাথায় একই নকশা: বাঁ দিকে লোগো, ডান দিকে কয়েকটি লিংক, কখনো তার পরে একটি কার্ট বা লগইন বোতাম। CSS লেখার আগে HTML ঠিক করুন — পর্ব ১০-এর semantic নিয়মে লিংকের দলটি <nav>-এর ভেতরে একটি <ul> তালিকা। এতে screen reader ব্যবহারকারী শোনেন “navigation, ৫টি আইটেমের তালিকা”, আর সরাসরি landmark ধরে মেনুতে লাফ দিতে পারেন। Flexbox এই HTML-এর গায়ে হাত না দিয়েই চেহারা বদলায়।

আসল প্রশ্ন: লোগো আর লিংকের মাঝের ফাঁকা জায়গাটা কে নেবে? অনেকে justify-content: space-between লেখেন — দুটি item থাকলে সেটা ঠিকঠাক চলে। কিন্তু তৃতীয় একটি item যোগ হলেই নকশা ভেঙে যায়। ধাপে ধাপে দেখুন:

.site-head { display: flex; gap: 12px; }

.site-head { display: flex; justify-content: space-between; }

.site-head { display: flex; gap: 12px; }
.site-head nav { margin-left: auto; }

.site-head nav { margin-inline: auto; }  /* বাঁ আর ডান দুটোই auto */

এবার একটি পুরো navbar, যা সরু পর্দায় নিজে থেকেই ভাঁজ হয়ে যায় — কোনো media query ছাড়াই:

<style>
  body { margin: 0; font-family: sans-serif; }
  .site-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;                /* সারির ফাঁক 8px, পাশের ফাঁক 24px */
    padding: 12px 16px;
    background: #0d1f3c;
  }
  .logo { color: #ffd166; font-size: 20px; font-weight: bold; text-decoration: none; }
  .site-head nav { margin-left: auto; }
  .menu { display: flex; flex-wrap: wrap; gap: 4px 16px;
          margin: 0; padding: 0; list-style: none; }
  .menu a { display: block; padding: 6px 2px; color: white; text-decoration: none; }
  .menu a:hover, .menu a:focus-visible { text-decoration: underline; }
</style>
<header class="site-head">
  <a class="logo" href="#home">দেশি হাট</a>
  <nav aria-label="প্রধান মেনু">
    <ul class="menu">
      <li><a href="#home">হোম</a></li>
      <li><a href="#shari">শাড়ি</a></li>
      <li><a href="#mango">আম</a></li>
      <li><a href="#offer">অফার</a></li>
      <li><a href="#help">সাহায্য</a></li>
    </ul>
  </nav>
</header>

৪ · কার্ডের সারি — সমান উচ্চতা, বোতাম সবসময় তলায়

অনলাইন দোকানের তিনটি পণ্য পাশাপাশি। একটির বর্ণনা এক লাইনের, আরেকটির চার লাইনের। ডিজাইনার চান তিনটি কার্ড সমান উঁচু হোক আর “কার্টে যোগ করুন” বোতাম তিনটি একই রেখায় তলায় বসুক। এখন দুটি স্তরের flex যথেষ্ট — বাইরের সারি আর প্রতিটি কার্ডের ভেতর। ধাপে ধাপে দেখুন:

.row { display: flex; align-items: flex-start; }

.row { display: flex; }  /* align-items: stretch ডিফল্ট */

.card { display: flex; flex-direction: column; }
.card .btn { margin-top: auto; }

.row { display: flex; flex-wrap: wrap; }
.card { flex: 1 1 40%; }  /* প্রতি লাইনে ২টি */

এবার নিজে চালিয়ে দেখুন। এখানে বোতামগুলো আসল <button>, লিংক নয় — কারণ “কার্টে যোগ” একটি কাজ, অন্য পাতায় যাওয়া নয়:

.row {
  display: flex;
  gap: 12px;
  font-family: sans-serif;
}
.card {
  flex: 1;                 /* তিনটি সমান চওড়া */
  display: flex;           /* কার্ডের ভেতরটাও flex */
  flex-direction: column;
  padding: 12px;
  border: 1px solid #ccd;
  border-radius: 10px;
}
.card h3, .card p { margin: 0 0 8px; }
.btn {
  margin-top: auto;        /* বাড়তি জায়গা ওপরে, বোতাম তলায় */
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: #006a4e;
  color: white;
  font: inherit;
}

৫ · Media object আর input group — ছবির পাশে লেখা, ঘরের পাশে বোতাম

ফেসবুকের মন্তব্য, পণ্যের রিভিউ, খবরের তালিকা, চ্যাটের বার্তা — সবখানে একটি একই আকৃতি: বাঁ দিকে একটি ছোট ছবি বা আইকন, ডান দিকে বাকি জায়গা জুড়ে লেখা। এর একটি নামও আছে — media object. এখানে তিনটি সিদ্ধান্ত লাগে: ছবি কখনো চাপা পড়বে না (flex: none), লেখা বাকি সব জায়গা নেবে (flex: 1), আর ছবি লেখার উচ্চতায় টেনে লম্বা হবে না (align-items: flex-start).

.media {
  display: flex;
  align-items: flex-start;  /* ছবি টেনে লম্বা হবে না */
  gap: 12px;
  max-width: 460px;
  font-family: sans-serif;
}
.avatar {
  flex: none;               /* কখনো চাপা পড়বে না */
  width: 48px;
  aspect-ratio: 1;          /* উচ্চতা = চওড়া */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f4b400;
  font-size: 22px;
}
.media-body { flex: 1; min-width: 0; }
.media-body h4 { margin: 0 0 4px; }
.media-body p { margin: 0; line-height: 1.5; }
small { color: #556; font-weight: normal; }

Input group — সার্চের ঘর আর বোতাম এক সাথে

দোকানের মাথায় সার্চ বক্স: একটি লম্বা ঘর, তার গায়ে লাগানো “খুঁজুন” বোতাম। চাওয়া হলো, বোতাম নিজের মাপে থাকবে, ঘরটি বাকি সব চওড়া নেবে, আর ফোনের সরু পর্দায়ও বোতাম বাক্সের বাইরে বেরোবে না। একে বলে input group. HTML-এ একটি জিনিস বাদ দেবেন না — ঘরের label. নকশায় লেবেল দেখানোর জায়গা না থাকলে সেটি চোখের আড়ালে রাখুন (visually hidden), মুছে দেবেন না; placeholder লেবেলের বদলি নয়।

.search {
  display: flex;
  max-width: 420px;
}
.search input {
  flex: 1;
  min-width: 0;      /* সরু পর্দায় ঘর ছোট হতে পারবে */
  padding: 10px 16px;
  border: 2px solid #006a4e;
  border-right: 0;
  border-radius: 999px 0 0 999px;
  font-size: 16px;
}
.search button {
  flex: none;        /* বোতাম নিজের মাপে স্থির */
  padding: 0 20px;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: #006a4e;
  color: white;
  font-size: 16px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

৬ · পুরো পাতার কাঠামো — sticky footer আর holy-grail-lite

“যোগাযোগ” বা “ধন্যবাদ”-এর মতো ছোট পাতায় একটি পরিচিত দৃশ্য: content মাত্র কয়েক লাইন, তাই footer পাতার মাঝামাঝি উঠে এসেছে, তার নিচে খালি সাদা জায়গা। চাওয়া হলো — content কম হলে footer পর্দার তলায় থাকবে, বেশি হলে স্বাভাবিকভাবে content-এর পরে। একে বলে sticky footer. (এটি position: sticky নয় — পর্ব ২৪-এর সেই জিনিস আলাদা; এখানে footer স্ক্রলের সাথে আটকে থাকে না।)

সমাধান: পুরো body-কে একটি খাড়া flex container বানান, তার উচ্চতা অন্তত পর্দার সমান করুন, আর বাড়তি সব খাড়া জায়গা main-কে দিয়ে দিন। প্রিভিউর ফ্রেম নিজের উচ্চতা content দেখে ঠিক করে, তাই নিচের উদাহরণে body-র বদলে একটি .page বাক্স আর পর্দার উচ্চতার বদলে 340px নিয়েছি — নিয়ম হুবহু এক:

<style>
  body { margin: 0; font-family: sans-serif; }
  .page {
    display: flex;
    flex-direction: column;
    min-height: 340px;     /* আসল সাইটে body-তে: min-height: 100dvh */
    border: 2px dashed #789;
  }
  header, footer { padding: 10px 16px; color: white; background: #0d1f3c; }
  main { flex: 1; padding: 0 16px; }   /* বাড়তি সব খাড়া জায়গা main-এর */
  footer { background: #334; }
</style>
<div class="page">
  <header>দেশি হাট</header>
  <main>
    <h1>ধন্যবাদ!</h1>
    <p>আপনার অর্ডার নম্বর ২০৪৮। বিস্তারিত SMS-এ পাঠানো হয়েছে।</p>
  </main>
  <footer>© দেশি হাট · হেল্পলাইন ১৬xxx</footer>
</div>

আসল সাইটে কোডটি দেখতে এমন:

body {
  margin: 0;                 /* নইলে ডিফল্ট 8px margin-এ স্ক্রলবার আসে */
  display: flex;
  flex-direction: column;
  min-height: 100vh;         /* পুরোনো ব্রাউজারের জন্য fallback */
  min-height: 100dvh;        /* মোবাইলের address bar হিসাব করে */
}
main { flex: 1; }

দুইবার min-height লেখার কারণ পর্ব ২০-এর dvh একক। মোবাইলে স্ক্রল করলে address bar লুকায়-বেরোয়, আর পুরোনো 100vh সাধারণত বড় মাপটা ধরে — ফলে ফোনে footer address bar-এর নিচে লুকাতে পারে। 100dvh বর্তমান দৃশ্যমান উচ্চতা ধরে; এটি এখন Baseline Widely available. যে ব্রাউজার dvh চেনে না, সে দ্বিতীয় লাইনটি বাদ দিয়ে প্রথমটি রাখে — এই হলো CSS-এর সহজ fallback.

Holy-grail-lite — header, তিন কলাম, footer

পুরোনো ওয়েবের একটি বিখ্যাত চ্যালেঞ্জের নাম ছিল holy grail layout: ওপরে header, নিচে footer, মাঝে তিনটি কলাম — বাঁয়ে মেনু, মাঝে মূল লেখা, ডানে বিজ্ঞাপন বা সম্পর্কিত লিংক; তিন কলাম সমান উঁচু, আর মাঝেরটি বাকি সব চওড়া নেবে। এর ইতিহাস ভাবনার প্রশ্ন ২-এ। Flexbox-এ একটি হালকা রূপ খুব সহজ, আর flex-wrap দিলে media query ছাড়াই সরু পর্দায় কলামগুলো একটির নিচে আরেকটি চলে আসে:

.columns { display: flex; flex-wrap: wrap; gap: 16px; }
.columns > nav   { flex: 1 1 160px; }   /* শুরু 160px, বাড়তে পারে */
.columns > main  { flex: 3 1 320px; }   /* বাড়তি জায়গার ৩ ভাগ পাবে */
.columns > aside { flex: 1 1 160px; }

নিচের ডায়াগ্রামে একই তিনটি কলাম, শুধু container-এর চওড়া বদলাচ্ছে — আর শেষ ধাপে একটি বিপদ:

container: 560px → 110 + 200 + 110 + ফাঁক = 432 ≤ 560 → এক লাইন

container: 380px → 110 + 200 + ফাঁক = 316 আঁটে, aside আঁটে না → পরের লাইন

container: 240px → 110 + 200 আঁটে না → প্রতিটি নিজের লাইনে

<main>…</main> <nav>…</nav> <aside>…</aside>
nav { order: -1; }   /* চোখে বাঁয়ে, Tab-এ মাঝখানে */

৭ · ট্যাগ-চিপ আর দুই-ভাগের toolbar

দোকানের পণ্য তালিকার ঠিক ওপরে প্রায়ই একটি পট্টি থাকে: বাঁ দিকে বিভাগের ছোট ছোট গোল বোতাম — “সব”, “শাড়ি”, “আম”, “মধু” — যাদের বলে chip; ডান দিকে “সাজান” ড্রপডাউন। এখানে দুটি প্যাটার্ন একসাথে। চিপের তালিকা হলো flex-wrap আর gap-এর ক্লাসিক কাজ — যত চিপ আঁটে, তত এক লাইনে, বাকিরা পরের লাইনে, সব জায়গায় সমান ফাঁক। আর পুরো পট্টিটি একটি “split” toolbar: দুটি দল, একটি বাঁয়ে, একটি ডানে।

gap আসার আগে চিপের মাঝে ফাঁক দিতে প্রতিটির ডানে-নিচে margin দেওয়া হতো, আর শেষ চিপের বাড়তি margin লুকাতে container-এ negative margin. Flexbox-এ gap ২০১৮ থেকে ২০২১ সালের মধ্যে ধাপে ধাপে সব প্রধান ব্রাউজারে এসেছে, এখন Baseline Widely available — margin-এর কৌশল আর লাগে না।

.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;  /* দুই দল দুই প্রান্তে */
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #f4f6fa;
  font-family: sans-serif;
}
.chips {
  display: flex;
  flex-wrap: wrap;                 /* না আঁটলে পরের লাইনে */
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chips button {
  padding: 6px 14px;
  border: 1px solid #99a;
  border-radius: 999px;
  background: white;
  font: inherit;
}
.chips [aria-pressed="true"] { background: #0d1f3c; color: white; }
.actions { display: flex; align-items: center; gap: 6px; }

৮ · প্রজেক্ট: অনলাইন দোকানের পণ্য তালিকা — আর কোথায় Flexbox থামে

এবার সব জোড়া লাগাই। একটি বাংলাদেশি অনলাইন দোকানের পণ্যের তালিকা: প্রতিটি কার্ডে ছবির জায়গা, নাম, দাম টাকায় (৳), কোনোটিতে আগের দাম কাটা, আর তলায় বোতাম। ব্যবহার হলো অংশ ২-এর মাঝখানে বসানো (ছবির ঘরে আইকন), অংশ ৪-এর সমান উচ্চতা আর তলায় বোতাম, অংশ ৭-এর ভাঁজ আর gap. পণ্যের তালিকা আসলে একটি তালিকা, তাই HTML-এ <ul> আর <li>:

<style>
  .shop { display: flex; flex-wrap: wrap; gap: 16px;
          margin: 0; padding: 0; list-style: none; font-family: sans-serif; }
  .item { flex: 1 1 180px; display: flex; flex-direction: column;
          border: 1px solid #dde; border-radius: 12px; overflow: hidden; }
  .thumb { height: 110px; display: flex; justify-content: center;
           align-items: center; font-size: 48px;
           background: linear-gradient(135deg, #e8f5ee, #fff4d6); }
  .info { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
  .info h3 { margin: 0; font-size: 17px; }
  .price { margin: 0; font-weight: bold; color: #006a4e; }
  .price del { color: #778; font-weight: normal; }
  .info button { margin-top: auto; padding: 8px; border: 0; border-radius: 8px;
                 background: #b3122e; color: white; font: inherit; }
</style>
<ul class="shop">
  <li class="item"><div class="thumb" aria-hidden="true">🥭</div><div class="info"><h3>রাজশাহীর হিমসাগর আম, ৫ কেজি</h3><p class="price">৳ ৯৫০</p><button type="button">কার্টে যোগ করুন</button></div></li>
  <li class="item"><div class="thumb" aria-hidden="true">🧵</div><div class="info"><h3>ঢাকাই জামদানি শাড়ি</h3><p class="price">৳ ৮,৫০০ <del>৳ ৯,২০০</del></p><button type="button">কার্টে যোগ করুন</button></div></li>
  <li class="item"><div class="thumb" aria-hidden="true">🍯</div><div class="info"><h3>সুন্দরবনের খাঁটি মধু, ৫০০ গ্রাম</h3><p class="price">৳ ৬৫০</p><button type="button">কার্টে যোগ করুন</button></div></li>
  <li class="item"><div class="thumb" aria-hidden="true">👜</div><div class="info"><h3>পাটের ব্যাগ</h3><p class="price">৳ ৪৫০</p><button type="button">কার্টে যোগ করুন</button></div></li>
  <li class="item"><div class="thumb" aria-hidden="true">🍵</div><div class="info"><h3>শ্রীমঙ্গলের চা পাতা, ৪০০ গ্রাম</h3><p class="price">৳ ৩২০</p><button type="button">কার্টে যোগ করুন</button></div></li>
</ul>

কখন Flexbox ভুল টুল

উপরের শেষ লাইনের সমস্যাটা কোনো বাগ নয় — এটি Flexbox-এর স্বভাব। Flexbox এক দিকের লেআউট: প্রতিটি লাইন নিজের item নিয়ে নিজের মতো জায়গা ভাগ করে, ওপরের লাইনের কলাম কোথায় আছে সে জানে না। কিন্তু পণ্যের জাল, ফটো গ্যালারি বা ড্যাশবোর্ডে আপনি চান দুই দিকে মিল — সারিও মিলবে, কলামও মিলবে, শেষ লাইনের কার্ডও ওপরের কার্ডের সমান চওড়া হবে। এটি Grid-এর কাজ: grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) এক লাইনেই সমস্যাটা মিটিয়ে দেয় (পর্ব ২৭ আর ২৮-এ বিস্তারিত)।

বাস্তবে দুটি প্রায় সবসময় একসাথে চলে: পাতার কাঠামো আর পণ্যের জাল Grid-এ, আর প্রতিটি কার্ডের ভেতরে, header-এর ভেতরে, বোতামের দলে Flexbox. একটি অন্যটির প্রতিযোগী নয়, পরিপূরক।

৯ · প্রচলিত বাগ আর অ্যাক্সেসিবিলিটি — DOM-এর ক্রম = চোখের ক্রম

Flexbox-এর বেশিরভাগ “রহস্যময়” সমস্যা চারটি জায়গা থেকে আসে। প্রতিটির লক্ষণ আর ওষুধ নিচের টেবিলে:

শতাংশের gap-এ আরেকটি ফাঁদ: উচ্চতা auto হলে row-gap-এর শতাংশ চক্রাকার হিসাবে পড়ে (উচ্চতা নির্ভর করে gap-এর ওপর, gap উচ্চতার ওপর), ফল প্রায়ই প্রত্যাশামতো হয় না। rem-এ gap দিলে প্রশ্নই ওঠে না।

প্রথম বাগটি সবচেয়ে বেশি দেখা যায়, আর চোখে দেখার চেয়ে মেপে দেখা ভালো। নিচের দুটি সারি হুবহু এক, শুধু দ্বিতীয়টিতে লেখার item-এ min-width: 0. কোডটি দুটি সারির চওড়া আর ভেতরের content-এর আসল চওড়া মেপে দেখায়:

// দুটি সারি: বাক্সের চওড়া বনাম ভেতরের content-এর আসল চওড়া
function check() {
  ['bug', 'fixed'].forEach(function (id) {
    const row = document.getElementById(id);
    const text = row.querySelector('.text');
    console.log(id + ': সারি ' + row.clientWidth + 'px, content ' +
      row.scrollWidth + 'px, min-width = ' + getComputedStyle(text).minWidth);
  });
}
// প্রিভিউ layout হওয়া পর্যন্ত অপেক্ষা, তারপর মাপা
(function wait() {
  document.body.offsetWidth ? check() : setTimeout(wait, 50);
})();

অ্যাক্সেসিবিলিটি — চোখ যা দেখে, keyboard তা-ই মানুক

Flexbox চোখের ক্রম বদলানোর তিনটি উপায় দেয়: flex-direction: row-reverse / column-reverse, flex-wrap: wrap-reverse, আর প্রতিটি item-এ order. তিনটিই শুধু আঁকার ক্রম বদলায়। DOM — অর্থাৎ HTML-এ লেখার ক্রম — একটুও বদলায় না। আর screen reader পড়ে DOM-এর ক্রমে, keyboard-এর Tab যায় DOM-এর ক্রমে (tab order). ফল: চোখে দেখা ক্রম আর শোনা বা Tab-এর ক্রম আলাদা হয়ে যায়।

WCAG 2.2-এর দুটি নিয়ম এখানে সরাসরি খাটে: 1.3.2 Meaningful Sequence (অর্থ বুঝতে ক্রম জরুরি হলে প্রোগ্রাম সেই ক্রম ঠিকমতো পড়তে পারবে) আর 2.4.3 Focus Order (focus এমন ক্রমে যাবে যাতে অর্থ আর কাজ ঠিক থাকে)। তাই নিয়মটি সহজ: যে ক্রমে পড়া উচিত, HTML সেই ক্রমেই লিখুন; CSS দিয়ে ক্রম বদলাবেন না। ছোটখাটো সাজের ক্ষেত্রে ব্যতিক্রম চলে — যেমন media object-এ ছবি ডানে দেখাতে row-reverse, যেখানে ছবিটি শুধু সাজ, focus পায় না, কিছু পড়ে শোনায় না।

১০ · AI-এর যুগে — Flexbox-এর কোড যাচাই

“একটা responsive navbar বানিয়ে দাও” বললে AI কয়েক সেকেন্ডে কোড দেয়, আর বেশিরভাগ সময় ব্রাউজারে মোটামুটি ঠিকই দেখায়। কিন্তু এই বিষয়ে কিছু ভুল বারবার আসে — কারণ AI বহু বছরের পুরোনো টিউটোরিয়াল আর কোড পড়ে শিখেছে, আর “দেখতে ঠিক” আর “সঠিক” আলাদা জিনিস:

AI-এর লেখা Flexbox লেআউট হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এর device toolbar-এ ৩২০ পিক্সেল চওড়ায় দেখেছি — পাশে কোনো স্ক্রলবার নেই, কিছু পর্দার বাইরে যায়নি
• লম্বা লেখা দিয়ে পরীক্ষা করেছি — লম্বা পণ্যের নাম, একটি লম্বা ইমেইল বা লিংক; দরকারি জায়গায় min-width: 0 আছে
• মাউস ছাড়া শুধু Tab চেপে পুরো অংশ ঘুরেছি — focus চোখের ক্রমেই যায়, প্রতিটি লিংকে focus দেখা যায়
• Elements প্যানেলের “flex” ব্যাজে চেপে দেখেছি কোন item কতটা বাড়ছে-কমছে, আর কোনো অকারণ নির্দিষ্ট width বা height নেই
• HTML validator.w3.org-এ পরীক্ষা করেছি আর Lighthouse-এর Accessibility রিপোর্ট চালিয়েছি; নতুন কিছু (যেমন safe center, dvh) থাকলে MDN আর Can I use-এ সাপোর্ট দেখে fallback রেখেছি
• প্রশ্ন করেছি: এটা কি এক দিকের সাজানো, নাকি সারি-কলামের জাল? জাল হলে Grid-এর কথা AI-কে জিজ্ঞেস করেছি