Flexbox — এক দিকে সাজানোর লেআউট

১ · Flexbox কেন এলো — লেআউটের পুরোনো যন্ত্রণা

ধরুন একটি মোবাইল ব্যাংকিং অ্যাপের ওপরের অংশ বানাচ্ছেন। বাঁয়ে লোগো, ডানে দুটি বোতাম, আর তিনটিই উচ্চতায় ঠিক মাঝখানে। আজ এটি তিন লাইনের CSS. কিন্তু ২০১০-এর দশকের শুরুতেও এই সাধারণ কাজটি ছিল ওয়েব ডেভেলপারদের নিত্যদিনের মাথাব্যথা। “একটি div মাঝখানে বসাবো কীভাবে?” — এই প্রশ্ন নিয়ে তখন এত রসিকতা হতো যে সেটি প্রায় প্রবাদ হয়ে গিয়েছিল।

কারণটা বোঝা দরকার। CSS-এর প্রথম লক্ষ্য ছিল দলিল সাজানো — শিরোনাম, প্যারাগ্রাফ, ছবি, ওপর থেকে নিচে, যেমন পত্রিকার পাতা (পর্ব ২৩-এর normal flow). অ্যাপের মতো ইন্টারফেস বানানোর জন্য কোনো লেআউট-যন্ত্র CSS-এ ছিলই না। তাই ডেভেলপাররা অন্য কাজের জন্য তৈরি জিনিস দিয়ে লেআউট বানাতেন:

float আসলে তৈরি হয়েছিল পত্রিকার মতো ছবির পাশ দিয়ে লেখা গড়িয়ে নিতে — পুরো পাতার কাঠামো বানাতে নয়। একটি কাজের যন্ত্র দিয়ে অন্য কাজ করানোয় প্রতিটি লেআউট ভঙ্গুর হতো: একটি লম্বা শিরোনাম বা একটি বাড়তি বোতামেই সব ভেঙে পড়ত। দরকার ছিল এমন একটি যন্ত্র, যাকে বলা যায় “এই জিনিসগুলো এক সারিতে রাখো, ফাঁকা জায়গা এভাবে ভাগ করো, আর সবাইকে মাঝখানে বসাও” — হিসাব ব্রাউজার করবে। সেই যন্ত্রই Flexbox, পুরো নাম CSS Flexible Box Layout.

২ · Container আর item — কে কাকে সাজায়

Flexbox-এ সবসময় দুটি পক্ষ। যে element-এ আপনি display: flex লেখেন, সে হয় flex container. আর তার সরাসরি child-রা হয় flex item. container ঠিক করে item-রা কোন দিকে, কতটা ফাঁকে, কোথায় বসবে; প্রতিটি item বলতে পারে সে নিজে কতটা জায়গা নেবে, বা নিজে আলাদা কোথায় বসবে।

নিচের এডিটরে একটি তাক আছে। ভেতরে তিনটি div, একটি p, আর শেষে কোনো ট্যাগ ছাড়া একটি শব্দ। তৃতীয় বাক্সের ভেতরে একটি span-ও আছে।

.shelf {
  display: flex;
  border: 2px dashed #64748b;
  padding: 8px;
}
.box {
  background: #fde68a;
  border: 1px solid #b45309;
  padding: 8px 12px;
  margin: 4px;
}
span { background: #bfdbfe; }

এই ছোট পরীক্ষা থেকে Flexbox-এর কয়েকটি মৌলিক নিয়ম বেরিয়ে আসে:

• flex বনাম inline-flex: দুটিই ভেতরে একই Flexbox চালায়। পার্থক্য শুধু বাইরের আচরণে — flex container নিজে block-এর মতো পুরো লাইন নেয়, inline-flex লেখার লাইনের ভেতরে একটি শব্দের মতো বসে।
• item মানেই block-এর মতো বাক্স: সরাসরি child যদি span বা a-এর মতো inline element-ও হয়, item হওয়ার পর সে width, height, ওপর-নিচের margin — সব মানে।
• কিছু পুরোনো property item-এ কাজ করে না: item-এর ওপর float আর vertical-align উপেক্ষা হয়।
• margin মেশে না: পর্ব ১৯-এর margin collapsing flex item-দের মধ্যে হয় না — দুই item-এর 4px + 4px margin মিলে ফাঁক ঠিক 8px.

৩ · Main axis আর cross axis — Flexbox-এর দুই দিক

Flexbox বোঝার আসল চাবি একটিই: দুটি অক্ষ। item-রা যে দিকে একের পর এক বসে, সেটি main axis (মূল অক্ষ)। তার সাথে সমকোণে আড়াআড়ি দিকটি cross axis. কোনটি main হবে, তা ঠিক করে container-এর flex-direction. Flexbox-এর প্রায় প্রতিটি property “বাঁ-ডান” বা “ওপর-নিচ” নয়, এই দুই অক্ষের ভাষায় কথা বলে। নিচের ডায়াগ্রামে অক্ষ দুটিকে ঘুরতে দেখুন:

৪ · Main axis-এ সাজানো — justify-content আর gap

item-রা নিজেদের মাপমতো জায়গা নেওয়ার পর container-এ যে জায়গা বাকি থাকে, তার নাম free space (ফাঁকা জায়গা)। justify-content ঠিক করে এই ফাঁকা জায়গা main axis বরাবর কোথায় যাবে — সব এক পাশে, দুই পাশে সমান, না item-দের মাঝে ভাগ করে।

এবার এই পর্বের খেলার মাঠ। নিচে পাঁচটি রঙিন বাক্সের একটি তাক — বাক্সের রং আর মাপ আলাদা রাখা আছে, এডিটরে শুধু তাকের Flexbox-এর property. মন্তব্যে (/* */) প্রতিটি property-র অন্য মানগুলো লেখা আছে — একটি একটি করে বদলে দেখুন।

/* খেলার মাঠ: মান বদলান, প্রিভিউ নিজে বদলাবে */
.shelf {
  display: flex;
  flex-direction: row;
  /* row-reverse | column | column-reverse */
  justify-content: flex-start;
  /* flex-end | center | space-between |
     space-around | space-evenly */
  align-items: stretch;
  /* flex-start | center | flex-end | baseline */
  gap: 8px;
  /* 0 | 24px | 1rem */
}

gap — ফাঁকের সঠিক যন্ত্র

gap শুধু item-দের মাঝে ফাঁক দেয়, প্রথমটির আগে বা শেষটির পরে নয়। Flexbox-এ gap আসার আগে সবাই প্রতিটি item-এ margin-right দিত, তারপর শেষটির জন্য :last-child { margin-right: 0 } লিখে বাড়তি ফাঁক মুছত; সারি ভেঙে নতুন লাইনে গেলে সেই হিসাবও গোলমেলে হতো। এখন এক লাইনেই কাজ: gap: 16px দুই দিকেই, বা gap: 12px 24px দিলে প্রথমটি সারির মাঝে (row-gap), দ্বিতীয়টি কলামের মাঝে (column-gap). একটি জিনিস মনে রাখুন: gap হলো সর্বনিম্ন ফাঁক; space-between বাড়তি জায়গা থাকলে তার ওপর আরও ফাঁক যোগ করে।

৫ · Cross axis-এ সাজানো — align-items, align-self আর মাঝখানে বসানো

align-items ঠিক করে প্রতিটি item তার লাইনের ভেতরে cross axis বরাবর কোথায় বসবে। ডিফল্ট আচরণ stretch — item-এর cross দিকের মাপ (row-এ উচ্চতা) ঠিক করে দেওয়া না থাকলে সে লাইনের পুরো উচ্চতা জুড়ে টানটান হয়। পুরোনো দিনের “সব কলাম সমান উঁচু” সমস্যার সমাধান তাই একেবারে বিনা খরচে। আর কোনো একটি item দলছুট হতে চাইলে নিজের ওপর align-self লেখে — সেটি শুধু তার জন্য align-items-কে বাতিল করে।

.row {
  display: flex;
  gap: 8px;
  height: 170px;
  border: 2px dashed #64748b;
  align-items: stretch;
  /* flex-start | center | flex-end | baseline */
}
.row > div {
  background: #bae6fd;
  border: 1px solid #0369a1;
  padding: 8px;
}
.d { font-size: 30px; }
.c { align-self: flex-end; } /* শুধু ডালপুরি দলছুট */

সেই বিখ্যাত প্রশ্নের উত্তর — “মাঝখানে বসাবো কীভাবে?”

এখন দুই অক্ষ জানেন, তাই উত্তর দুই লাইনে: main axis-এ justify-content: center, cross axis-এ align-items: center. লেখা এক লাইন হোক বা দশ লাইন, বাক্স ছোট হোক বা বড় — কোনো সংখ্যা হিসাব করতে হয় না।

.parent {
  display: flex;
  justify-content: center;  /* main axis: আনুভূমিক মাঝখান */
  align-items: center;      /* cross axis: উল্লম্ব মাঝখান */
  min-height: 300px;        /* উচ্চতা না থাকলে উল্লম্ব মাঝখানের অর্থ নেই */
}

শেষ লাইনটি খেয়াল করুন। নতুনরা প্রায়ই অভিযোগ করেন “align-items: center কাজ করছে না!” — কারণ container-এর উচ্চতা তার লেখার সমান, তাই উল্লম্ব দিকে কোনো ফাঁকা জায়গাই নেই, মাঝখানে আনার প্রশ্নই ওঠে না। DevTools-এ container-এর মাপ দেখলেই ধরা পড়ে। একই কাজ margin: auto দিয়েও হয় (অংশ ৮), আর Grid-এ এক লাইনের place-items: center দিয়ে (পর্ব ২৭)। বাস্তব পাতায় লগইন বক্স, “লোড হচ্ছে” চিহ্ন বা খালি তালিকার বার্তায় এগুলো কীভাবে লাগে, সেটি পর্ব ২৬-এর বিষয়।

৬ · flex-wrap আর align-content — এক লাইনে না ধরলে

ডিফল্টে Flexbox সব item-কে এক লাইনেই রাখার চেষ্টা করে (flex-wrap: nowrap) — দরকার হলে item-দের চেপে ছোট করে, তাতেও না ধরলে container ছাপিয়ে বাইরে বের করে দেয়। flex-wrap: wrap দিলে জায়গা না ধরলে item-রা নতুন লাইনে চলে যায়, ঠিক যেমন লেখার শব্দ লাইনের শেষে পৌঁছে পরের লাইনে যায়। প্রতিটি লাইনকে বলে flex line, আর প্রতিটি লাইন নিজে একটি ছোট্ট আলাদা Flexbox — justify-content প্রতিটি লাইনের ভেতরে আলাদাভাবে কাজ করে।

লাইন একাধিক হলে নতুন একটি প্রশ্ন আসে: লাইনগুলো নিজেরা container-এর cross axis বরাবর কীভাবে সাজবে? এর উত্তর align-content. পার্থক্যটা মনে রাখুন — align-items সাজায় লাইনের ভেতরে item, align-content সাজায় container-এর ভেতরে লাইন।

.shelf {
  display: flex;
  flex-wrap: nowrap;      /* wrap | wrap-reverse */
  align-content: normal;
  /* flex-start | center | space-between | flex-end */
  gap: 8px;
  width: 280px;
  height: 220px;
  border: 2px dashed #64748b;
}
.box { width: 70px; }

৭ · item-এর মাপ — flex-grow, flex-shrink আর flex-basis

এতক্ষণ item-রা নিজের মাপেই ছিল, আমরা শুধু ফাঁকা জায়গা সরিয়েছি। Flexbox-এর আসল শক্তি হলো item-দের নমনীয় মাপ — বাড়তি জায়গা থাকলে item বড় হতে পারে, কম পড়লে ছোট হতে পারে। প্রতিটি item-এর জন্য ব্রাউজার তিনটি প্রশ্ন করে:

1. শুরুর মাপ কত? — flex-basis. ডিফল্ট auto: item-এ main দিকের width (column-এ height) দেওয়া থাকলে সেটি, না থাকলে ভেতরের লেখার মাপ। flex-basis-এ নির্দিষ্ট মান দিলে main axis-এ সেটি width-কে হারিয়ে দেয়।
2. জায়গা বাড়তি থাকলে কতটা নেবে? — flex-grow, একটি অনুপাত। ডিফল্ট 0, অর্থাৎ বাড়বে না।
3. জায়গা কম পড়লে কতটা ছাড়বে? — flex-shrink, এটিও অনুপাত। ডিফল্ট 1, অর্থাৎ দরকারে ছোট হবে।

এবার সংখ্যা ধরে পুরো হিসাবটি দেখুন। প্রথম চার ধাপে বাড়তি জায়গা ভাগ, পরের তিন ধাপে জায়গা কম পড়ার হিসাব:

flex shorthand — তিনটি এক লাইনে

বাস্তবে তিনটি property আলাদা করে প্রায় কেউ লেখেন না; লেখেন flex — ক্রম grow, shrink, basis. কিন্তু এর কয়েকটি এক-শব্দের রূপের অর্থ আলাদা করে মুখস্থ রাখার মতো, কারণ সেগুলোতে basis-এর মান লুকিয়ে বদলে যায়:

সবচেয়ে বেশি গোলমাল হয় flex: 1 আর flex: auto-তে। নাম কাছাকাছি, কিন্তু basis ভিন্ন। flex: auto-তে বাড়তি জায়গা ভাগ হয় লেখার মাপের পরে যা বাঁচে তা থেকে, তাই লম্বা লেখার item চওড়াই থাকে। flex: 1-এ basis 0, অর্থাৎ পুরো container-টাই “বাড়তি জায়গা” — সমান grow পেলে সবাই হুবহু সমান। নিজের চোখে দেখুন — দুই সারিতে একই তিনটি লেখা, শুধু flex-এর মান আলাদা:

.row {
  display: flex;
  gap: 6px;
  width: 420px;
  margin-bottom: 12px;
}
.row > div {
  background: #fde68a;
  border: 1px solid #b45309;
  padding: 8px;
}
.one > div  { flex: 1; }     /* = 1 1 0%   */
.auto > div { flex: auto; }  /* = 1 1 auto */

চোখের আন্দাজ নয়, সংখ্যা চাইলে ব্রাউজারকেই জিজ্ঞেস করুন। নিচের ছোট JavaScript একই দুই সারির প্রতিটি বাক্সের আসল চওড়া মেপে লিখে দেয়:

// প্রতিটি সারির বাক্সগুলোর চওড়া মেপে দেখাই
function measureRows() {
  document.querySelectorAll('.row').forEach(function (row) {
    const widths = Array.from(row.children).map(function (box) {
      return Math.round(box.getBoundingClientRect().width);
    });
    console.log(getComputedStyle(row.children[0]).flex, '→', widths.join(' + '), 'px');
  });
}
// ফ্রেমের layout শেষ হওয়া পর্যন্ত অপেক্ষা, তারপর মাপা
(function wait() {
  document.body.offsetWidth ? measureRows() : setTimeout(wait, 50);
})();

৮ · একটি ফাঁদ আর একটি কৌশল — min-width: auto আর margin: auto

ফাঁদ: লম্বা লেখা item ছাপিয়ে বেরিয়ে যায়

অংশ ৭-এ দেখলেন জায়গা কম পড়লে item ছোট হয়। কিন্তু কতটা ছোট? Flexbox-এর একটি সুরক্ষা-নিয়ম আছে: item-এর min-width-এর ডিফল্ট মান auto, আর flex item-এর ক্ষেত্রে এর অর্থ “ভেতরের লেখার সবচেয়ে ছোট সম্ভাব্য মাপের নিচে নামবে না”। এই মাপকে বলে min-content — সাধারণত সবচেয়ে লম্বা শব্দের চওড়া। নিয়মটির নাম automatic minimum size. উদ্দেশ্য ভালো: লেখা যাতে চেপে একে অপরের ওপর না পড়ে। কিন্তু একটি লম্বা URL, ফাইলের নাম, বা এক লাইনে আটকানো (white-space: nowrap) লেখা থাকলে min-content বিশাল হয়ে যায় — item আর ছোট হয় না, container ছাপিয়ে বেরিয়ে যায়, আর ফোনে পুরো পাতা পাশে স্ক্রল করে।

.card {
  display: flex;
  gap: 10px;
  width: 260px;
  padding: 10px;
  border: 2px solid #0369a1;
}
.icon { flex: none; font-size: 28px; }
.text {
  /* min-width: 0; */
}
.text p { margin: 0; }
.name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* লম্বা হলে … দেখাও */
}

কৌশল: margin: auto সব বাড়তি জায়গা খেয়ে ফেলে

পর্ব ১৯-এ দেখেছেন block-এ বাঁ-ডানের auto margin বাক্সকে আনুভূমিকভাবে মাঝখানে আনে। Flexbox-এ auto margin আরও শক্তিশালী: ব্রাউজার item-দের মাপ ঠিক করার পর যে free space বাঁচে, সেটি justify-content-এর আগেই auto margin-গুলোকে দিয়ে দেয়। ফলে কোনো item-এ margin-left: auto দিলে তার বাঁ পাশের সব বাড়তি জায়গা সে নিজে নেয় — সে আর তার পরের সবাই ডানে ঠেলে যায়। আর চার দিকেই auto দিলে, দুই অক্ষেই মাঝখানে।

.bar {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: #e2e8f0;
}
.push { margin-left: auto; }

.stage {
  display: flex;
  height: 140px;
  margin-top: 12px;
  border: 2px dashed #64748b;
}
.dot { margin: auto; }

৯ · order আর অ্যাক্সেসিবিলিটি — চোখের ক্রম বনাম HTML-এর ক্রম

order property দিয়ে HTML না বদলেই item-দের চোখে দেখার ক্রম বদলানো যায়। সবার ডিফল্ট order: 0; ছোট সংখ্যা আগে বসে, সমান হলে HTML-এর ক্রম। ঋণাত্মক সংখ্যাও চলে — order: -1 দিলে item সবার আগে। শুনতে সুবিধাজনক, কিন্তু এখানে একটি বড় ফাঁদ আছে, যা ধাপে ধাপে দেখা দরকার:

শুধু পড়ে নয়, নিজে অনুভব করুন। নিচের প্রিভিউর ভেতরে একবার ক্লিক করে বারবার Tab চাপুন, আর হলুদ দাগটি কোন পথে ঘোরে দেখুন:

<style>
  .menu { display: flex; gap: 8px; }
  .menu button { padding: 8px 12px; font-size: 15px; }
  .menu button:focus-visible { outline: 3px solid #f59e0b; }
  .last { order: -1; }
</style>
<p>এখানে ক্লিক করে Tab চাপুন:</p>
<div class="menu">
  <button>১ · হোম</button>
  <button>২ · পণ্য</button>
  <button>৩ · অফার</button>
  <button class="last">৪ · যোগাযোগ</button>
</div>

DevTools-এর flex overlay — Flexbox চোখে দেখুন

Flexbox-এ কিছু অদ্ভুত লাগলে অনুমান না করে DevTools খুলুন। Chrome বা Edge-এ Elements প্যানেলে flex container-এর পাশে ছোট একটি “flex” ব্যাজ দেখা যায়। সেটিতে ক্লিক করলে পাতার ওপর একটি রঙিন flex overlay আঁকা হয় — প্রতিটি item-এর সীমানা, gap-এর ডোরাকাটা জায়গা আর বাকি free space আলাদা করে দেখা যায়। Styles অংশে display: flex-এর পাশের ছোট আইকনে ক্লিক করলে একটি flexbox editor খোলে, যেখানে justify-content বা align-items-এর মান বোতাম চেপে বদলে তখনই ফল দেখা যায়। Firefox-এর Layout প্যানেলের Flexbox অংশ আরও এক ধাপ এগিয়ে — কোনো item বেছে নিলে দেখায় তার basis কত ছিল, সে কতটা বেড়েছে বা কমেছে, আর কোনো min/max সীমায় আটকেছে কি না; অংশ ৭-এর পুরো অঙ্কটাই সেখানে লেখা থাকে।

১০ · AI-এর যুগে — Flexbox-এর কাজ AI-কে দিলে কী দেখবেন

“একটা ঝকঝকে হেডার বানিয়ে দাও” বললে AI প্রায় সবসময় Flexbox-ই দেয়, আর বড় পর্দায় তা ঠিকঠাক দেখায়ও। সমস্যা লুকিয়ে থাকে কিনারায় — লম্বা লেখায়, ছোট পর্দায়, কীবোর্ডে। আর পুরোনো টিউটোরিয়াল থেকে শেখা বলে AI মাঝে মাঝে পুরোনো খসড়ার কোডও নিয়ে আসে।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া Flexbox কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এ “flex” ব্যাজে ক্লিক করে overlay দেখেছি — item, gap আর free space যেমন হওয়ার কথা তেমনই
• পণ্যের নাম তিন গুণ লম্বা আর একটি লম্বা URL দিয়ে দেখেছি — কিছু ছাপিয়ে যায়নি
• device toolbar-এ 320px চওড়ায় দেখেছি — পাশে কোনো স্ক্রল নেই
• শুধু Tab চেপে ঘুরেছি — focus-এর ক্রম চোখের ক্রমের সাথে মেলে
• HTML validator.w3.org-এ আর পাতা Lighthouse-এ চালিয়েছি; অচেনা property MDN-এ পড়ে Can I use-এ সাপোর্ট দেখেছি