CSS Flexbox প্লেগ্রাউন্ড

একটি ভিজ্যুয়াল ফ্লেক্সবক্স জেনারেটর যা আপনার হয়ে CSS লিখে দেয়

এই ফ্লেক্সবক্স জেনারেটর CSS Flexible Box Layout-কে এমন কিছুতে পরিণত করে যা আপনি দেখতে পারেন। justify-content বা align-items কী করবে তা অনুমান করার বদলে, আপনি একটি লেবেলযুক্ত কন্ট্রোলে প্রতিটি প্রপার্টি টগল করেন এবং লাইভ প্রিভিউ তাৎক্ষণিকভাবে পুনর্বিন্যস্ত হতে দেখেন — তারপর পরিষ্কার, প্রোডাকশন-রেডি কোড কপি করেন। এটি সম্পূর্ণভাবে আপনার ব্রাউজারে চলে, কোনো সাইনআপ ছাড়া এবং কিছুই আপলোড না করে।

এটি একটি প্রকৃত ফ্লেক্সবক্স প্লেগ্রাউন্ড: একটি প্রকৃত ফ্লেক্স কন্টেইনার এডিটেবল চাইল্ড আইটেমসহ, পূর্ণ কন্টেইনার ও প্রতি-আইটেম কন্ট্রোল, নেস্টেড কন্টেইনার, একটি রিসাইজেবল রেসপন্সিভ প্রিভিউ, এবং একটি শেয়ারযোগ্য URL। আপনি ফ্লেক্সবক্স শিখছেন হোক বা দ্রুত একটি নেভবার, কার্ড রো বা সেন্টার করা হিরো তৈরি করছেন হোক, আপনি সেকেন্ডেই ঠিক সেই লেআউট — এবং তার সাথে মেলানো CSS, Tailwind বা Bootstrap — পেতে পারেন।

প্রতিটি কন্টেইনার প্রপার্টি, লাইভ প্রিভিউসহ

স্পেক যেভাবে করে সেভাবেই কন্টেইনার নিয়ন্ত্রণ করুন। মূল অক্ষ বেছে নিতে flex-direction (row, row-reverse, column, column-reverse) সেট করুন, এর বরাবর আইটেম স্পেস করতে justify-content, এবং ক্রস অক্ষে তাদের অ্যালাইন করতে align-items। আইটেমগুলোকে নতুন লাইনে যেতে দিতে flex-wrap চালু করুন, সেই র‍্যাপ করা লাইন স্পেস করতে align-content ব্যবহার করুন, এবং স্বাধীন row ও column gap মান ডায়াল করুন।

একটি বিল্ট-ইন অক্ষ লেজেন্ড দেখায় আপনি flex-direction পরিবর্তন করার সাথে সাথে কোন দিকটি মূল অক্ষ এবং কোনটি ক্রস অক্ষ, তাই justify-content ও align-items-এর মধ্যকার সম্পর্ক অবশেষে ধরা পড়ে। এটি একটি হ্যান্ডস-অন ফ্লেক্সবক্স চিট শিট যা আপনি করার মধ্য দিয়ে শিখেন।

প্রতি-আইটেম নিয়ন্ত্রণ: grow, shrink, basis, order এবং align-self

বেশিরভাগ জেনারেটর শুধু কন্টেইনার পর্যন্ত থামে। এটি আপনাকে প্রিভিউতে যেকোনো আইটেম ক্লিক করে আলাদাভাবে এডিট করতে দেয়: flex-grow, flex-shrink ও flex-basis (flex শর্টহ্যান্ড) সেট করুন, এর align-self ওভাররাইড করুন, এবং HTML স্পর্শ না করেই এর পুনঃঅবস্থান করতে order পরিবর্তন করুন। স্পেস কীভাবে পুনর্বিতরণ হয় তা পরীক্ষা করতে আইটেম যোগ বা সরান।

এটি প্রকৃত প্যাটার্ন তৈরি করা সহজ করে দেয় — একটি স্থির সাইডবার একটি ফ্লেক্সিবল মেইন কলামের পাশে (flex: 0 0 240px flex: 1-এর পাশে), একটি একক সেন্টার করা আইটেম, বা margin-left: auto দিয়ে দূরপ্রান্তে ঠেলে দেওয়া একটি ফুটার লিংক।

নেস্টেড ফ্লেক্সবক্স এবং একটি রেসপন্সিভ প্রিভিউ

প্রকৃত লেআউট নেস্ট করা থাকে। যেকোনো আইটেম নিজেই একটি নেস্টেড ফ্লেক্স কন্টেইনার হতে পারে নিজস্ব direction, justify ও align সেটিংসসহ — ঠিক যা একটি হেডার রো-এর উপরে একটি বডি ধরে রাখা কার্ডের জন্য, বা একটি টুলবারের ভেতরে একটি টুলবারের জন্য নেস্টেড ফ্লেক্সবক্স জেনারেটর-এর প্রয়োজন হয়। জেনারেট করা কোডে নেস্টেড নিয়মও অন্তর্ভুক্ত থাকে।

ফ্লেক্সবক্স রেসপন্সিভ আচরণ সম্পর্কে হওয়ায়, প্রিভিউটি রিসাইজেবল: হ্যান্ডেল টেনে নিন বা একটি Mobile / Tablet / Desktop প্রস্থ প্রিসেট বেছে নিন এবং প্রতিটি সাইজে আইটেমগুলো র‍্যাপ ও পুনর্বিন্যস্ত হতে দেখুন। শিপ করার আগে একটি রেসপন্সিভ ফ্লেক্সবক্স লেআউট ঠিকভাবে আচরণ করছে কিনা তা নিশ্চিত করার দ্রুততম উপায়।

CSS, Tailwind বা Bootstrap হিসেবে কপি করুন — এবং অন্যান্য টুলের সাথে এটি কেমন

আপনার প্রজেক্ট যে ফরম্যাট ব্যবহার করে তা পেতে আউটপুট ট্যাব পাল্টান। CSS আপনাকে দেয় পরিষ্কার .container ও প্রতি-আইটেম নিয়ম flex শর্টহ্যান্ড ব্যবহার করে। Tailwind ইউটিলিটি ক্লাস লেখে — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — একটি রেডি-টু-পেস্ট HTML স্নিপেটে। Bootstrap সমতুল্য d-flex ইউটিলিটি ক্লাস আউটপুট করে। শুধুমাত্র আপনার আসলে পরিবর্তন করা প্রপার্টিগুলো নির্গত হয়, তাই আউটপুট প্রতিটি ডিফল্ট পুনরাবৃত্তি করার বদলে ন্যূনতম ও পঠনযোগ্য থাকে।

Flexbox.help এবং Loading.io-র ফ্লেক্সবক্স জেনারেটরের মতো অন্যান্য ভিজ্যুয়াল জেনারেটর কন্টেইনার প্রপার্টি দেয় কিন্তু প্রতি-আইটেম কন্ট্রোল ও নেস্টেড কন্টেইনার বাদ দেয়। Tailwind-এর অনলাইন প্লেগ্রাউন্ড ভ্যানিলা CSS জেনারেট করে না। এই টুল তিনটি আউটপুট ফরম্যাটই করে, নেস্টিং সামলায়, এবং একবার লোড হওয়ার পর অফলাইনে চলে — কোনো অ্যাকাউন্ট নেই, খরচ নেই, ব্রাউজার ছেড়ে যাওয়া কোনো ডেটা নেই।

দুই-অক্ষ মানসিক মডেল: main axis, cross axis, এবং কেন justify বনাম align সবাইকে বিভ্রান্ত করে

ফ্লেক্সবক্স দুটি লম্ব অক্ষে কাজ করে। main axis হলো যে দিকে ফ্লেক্স আইটেম বসানো হয় — flex-direction দিয়ে সেট করা। flex-direction: row-এ (ডিফল্ট), main axis বাম থেকে ডানে চলে। flex-direction: column-এ, এটি উপর থেকে নিচে চলে। cross axis সবসময় এর লম্ব: main axis অনুভূমিক হলে উল্লম্ব, main axis উল্লম্ব হলে অনুভূমিক।

justify-content এবং align-items ডেভেলপারদের বিভ্রান্ত করার কারণ হলো তাদের নাম মনগড়া মনে হয় যতক্ষণ না আপনি সেগুলো অক্ষের সাথে পিন করেন। justify-content সবসময় main axis নিয়ন্ত্রণ করে — এটি আইটেম প্রবাহের দিকে অতিরিক্ত স্পেস বিতরণ করে। align-items সবসময় cross axis নিয়ন্ত্রণ করে — এটি লম্ব মাত্রায় আইটেম কীভাবে অবস্থান করবে তা নির্ধারণ করে। flex-direction কে column-এ পাল্টান এবং দুটো প্রপার্টি ভিজ্যুয়ালভাবে ভূমিকা বদলে ফেলে, কারণ অক্ষগুলো বদলে গেছে, কিন্তু নিয়ম অপরিবর্তিত থাকে: justify = main, align = cross।

align-content-ও আছে, যা শুধু তখনই সক্রিয় হয় যখন flex-wrap: wrap একাধিক লাইন তৈরি করে। এটি নিয়ন্ত্রণ করে সেই লাইনগুলো cross axis-এ কীভাবে স্পেস হয়, যখন align-items প্রতিটি লাইনের ভেতরে পৃথক আইটেম অ্যালাইনমেন্ট সামলায়। অক্ষ মডেলটি মাথায় রেখে — একটি অনুভূমিক তীর ও একটি উল্লম্ব তীর আঁকুন, একটিকে 'main' এবং একটিকে 'cross' লেবেল দিন flex-direction-এর ভিত্তিতে, তারপর সেই অনুযায়ী justify ও align বরাদ্দ করুন — প্রায় প্রতিটি ফ্লেক্সবক্স প্রপার্টি-বিভ্রান্তি বাগ দূর করে।

flex শর্টহ্যান্ড ডিকোড: flex: 1, flex: auto, এবং flex: none একই জিনিস নয়

flex শর্টহ্যান্ড তিনটি মান প্যাক করে: flex-grow, flex-shrink, এবং flex-basis। flex-basis হলো ফ্রি স্পেস বিতরণের আগে আইটেমের অনুমানিক সাইজ — একটি শুরুর বিন্দু হিসেবে ভাবুন। flex-grow একটি অনুপাত যা একটি আইটেম কীভাবে অবশিষ্ট স্পেস পূরণ করতে প্রসারিত হয় তা নিয়ন্ত্রণ করে; 0 মানে এটি কখনও বাড়ে না, 1 মানে এটি একটি আনুপাতিক অংশ নেয়। flex-shrink ওভারফ্লোর জন্য এটি প্রতিফলিত করে: 1 আইটেমকে সংকুচিত হতে দেয়, 0 এটিকে তার basis-এ লক করে দেয় কন্টেইনার খুব ছোট হলেও।

flex: 1 1 1 0%-এ প্রসারিত হয়। মূল হলো সেই 0% basis: সব আইটেম শূন্য অন্তর্নিহিত সাইজ দিয়ে শুরু হয়, তাই ফ্রি স্পেস শুধু তাদের grow অনুপাত দিয়ে ভাগ হয় — প্রতিটি flex: 1 আইটেম তার কনটেন্ট নির্বিশেষে ঠিক একই প্রস্থে পৌঁছায়। flex: auto 1 1 auto-এ প্রসারিত হয়। এখানে basis হলো auto, মানে প্রতিটি আইটেমের কনটেন্ট প্রস্থ প্রথমে বিবেচনা করা হয়, এবং শুধু অবশিষ্ট স্পেস ভাগ করা হয়। একই flex: auto-সহ একটি ছোট আইটেম ও একটি লম্বা আইটেম সমান প্রস্থের হবে না। flex: none হলো 0 0 auto: আইটেম বাড়ে না বা সংকুচিত হয় না, যাই ঘটুক না কেন ঠিক তার স্বাভাবিক সাইজে থাকে।

বাস্তবে এই পার্থক্য প্রতিনিয়ত গুরুত্বপূর্ণ। সমান-প্রস্থের নেভিগেশন ট্যাব flex: 1 চায় (সমান বিভাজন, কনটেন্ট উপেক্ষা করে)। একটি ট্যাগ লিস্ট যা সুন্দরভাবে ওভারফ্লো করা উচিত প্রতিটি ট্যাগে flex: none চায়। একটি স্থির লেবেল ও একটি স্ট্রেচি ইনপুটসহ একটি ফর্ম লেবেলে flex: 0 0 120px এবং ইনপুটে flex: 1 ব্যবহার করে। শর্টহ্যান্ড মান মুখস্থ করার বদলে তিনটি সাব-প্রপার্টি আলাদাভাবে বোঝা, যেকোনো সাইজিং সমস্যা যুক্তি করা সহজ করে দেয়।

মুখস্থ রাখার মতো সাধারণ ফ্লেক্সবক্স লেআউট প্যাটার্ন

নিখুঁত সেন্টারিং সবচেয়ে বেশি সার্চ করা ফ্লেক্সবক্স কৌশল: কন্টেইনারে display: flex; justify-content: center; align-items: center; সেট করুন, একটি height দিন (ফুল-স্ক্রিনের জন্য যেমন min-height: 100vh), এবং চাইল্ডটি তার সাইজ যাই হোক না কেন একদম কেন্দ্রে বসে যাবে। এটি মোডাল, হিরো সেকশন, লোডিং স্পিনার এবং empty-state ইলাস্ট্রেশনের জন্য কাজ করে। ফ্লেক্সবক্সের আগে এর জন্য absolute positioning ও negative margin-এর সমন্বয় প্রয়োজন হতো; এখন এটি দুটো ঘোষণা।

একটি sticky footer-এর জন্য পেজটি অন্তত viewport height পূর্ণ করতে হবে এবং মেইন কনটেন্ট প্রসারিত হয়ে ফুটারকে নিচে ঠেলে দিতে হবে। পেজটি display: flex; flex-direction: column; min-height: 100vh;-এ মুড়ে দিন এবং মেইন কনটেন্ট এরিয়াতে flex: 1 দিন — এটি অবশিষ্ট সব উল্লম্ব স্পেস পূরণ করতে বাড়ে যাতে ফুটার ছোট পেজেও সবসময় নিচে বসে থাকে। সমান-উচ্চতার কলাম বিনামূল্যেই আসে: কারণ একই সারির ফ্লেক্স আইটেম ডিফল্টভাবে সবচেয়ে লম্বা সিবলিংয়ের সাথে মিলে স্ট্রেচ করে (align-items: stretch), একটি মাল্টি-কলাম কার্ড লেআউটে কোনো জাভাস্ক্রিপ্ট ছাড়াই অভিন্ন কলাম উচ্চতা থাকে। একটি নেভবার লোগো বামে ও লিংক ডানে ফ্লেক্স রো-তে justify-content: space-between ব্যবহার করে, বা লিংক গ্রুপকে দূরপ্রান্তে ঠেলতে শুধু margin-left: auto রাখে — একটি শক্তিশালী ট্রিক কারণ ফ্লেক্সবক্সে auto margin আইটেমটি অবস্থান করার আগে সব উপলব্ধ ফ্রি স্পেস ব্যবহার করে ফেলে।

flex-wrap-সহ কার্ড গ্রিড কন্টেইনারে flex-wrap: wrap এবং প্রতিটি কার্ডে flex: 1 1 280px একত্রিত করে — কার্ড একটি সারি পূরণ করে এবং আর ফিট না হলে র‍্যাপ করে। অজানা দৈর্ঘ্যের কনটেন্টের জন্য এটি CSS Grid-এর একটি পরিষ্কার বিকল্প, এবং সংকীর্ণ স্ক্রিনে ভালোভাবে ডিগ্রেড হয় কারণ কার্ড ওভারফ্লো না করে স্বাভাবিকভাবে র‍্যাপ করে। margin-এর বদলে gap জোড়া লাগানো ক্লাসিক 'last-row gap' সমস্যা এড়ায় যা margin সারিগুলো মাঝপথে শেষ হলে ঘটাত।

অ্যাক্সেসিবিলিটি: order প্রপার্টি কখন স্ক্রিন রিডার ও কিবোর্ড নেভিগেশন ভাঙে

ফ্লেক্সবক্সের order প্রপার্টি এবং flex-direction: row-reverse / column-reverse মান আইটেম কীভাবে ভিজ্যুয়ালভাবে দেখা যায় তা পাল্টে দেয় অন্তর্নিহিত HTML সোর্স অর্ডার স্পর্শ না করেই। ব্রাউজার সেগুলোকে ভিন্ন সিকোয়েন্সে পেইন্ট করে, কিন্তু অ্যাসিস্টিভ টেকনোলজি ও কিবোর্ড নেভিগেশন DOM অর্ডার অনুসরণ করে, ভিজ্যুয়াল অর্ডার নয়। একজন দৃষ্টিসম্পন্ন মাউস ব্যবহারকারী দেখেন Tab 3, Tab 1, Tab 2; একজন স্ক্রিন-রিডার ব্যবহারকারী শোনেন Tab 1, Tab 2, Tab 3; একজন Tab চাপা কিবোর্ড ব্যবহারকারী DOM অর্ডারে এলিমেন্টগুলোর মধ্য দিয়ে চলে যায়, যা ভিজ্যুয়ালি সংলগ্ন যা দেখা যায় তা এড়িয়ে যেতে পারে।

WCAG সাফল্য মানদণ্ড ১.৩.২ (Meaningful Sequence) দাবি করে যে কনটেন্টের সিকোয়েন্স যখন অর্থকে প্রভাবিত করে, তখন সঠিক পড়ার ক্রম প্রোগ্রাম্যাটিকভাবে নির্ধারণযোগ্য হতে হবে — যার অর্থ এটি DOM-এ প্রতিফলিত হতে হবে। শুধু CSS দিয়ে আইটেম পুনর্বিন্যাস করা এই নিয়ম লঙ্ঘন করে যখন অর্ডারটি অর্থবহ (নেভিগেশন, ধাপে-ধাপে ফ্লো, ডেটা টেবিল)। order-এর MDN ডকুমেন্টেশন স্পষ্টভাবে সতর্ক করে: 'স্ক্রিন রিডার এটি কীভাবে পড়বে তাকে প্রভাবিত করতে পারে এমন কিছুর জন্য order ব্যবহার করবেন না।' নিরাপদ পদ্ধতি হলো অর্ডার গুরুত্বপূর্ণ হলে সবসময় HTML সোর্সে আইটেম পুনর্বিন্যাস করা, এবং CSS order প্রপার্টি শুধুমাত্র সেই বিশুদ্ধভাবে ডেকোরেটিভ ভিজ্যুয়াল পরিবর্তনের জন্য সংরক্ষিত রাখা যেখানে কনটেন্ট যেকোনো ক্রমেই সমান অর্থবহ।

সম্পর্কিত বিবেচনা LTR পেজে ডান-থেকে-বাম ভিজ্যুয়াল লেআউটের জন্য ব্যবহৃত flex-direction: row-reverse-এও প্রযোজ্য — আইটেমের ভেতরের টেক্সট তখনও বাম-থেকে-ডান পড়ে, ভিজ্যুয়াল ও পড়ার অর্ডারের মধ্যে একটি অমিল তৈরি করে। প্রকৃত RTL সাপোর্ট flex direction উল্টানোর বদলে HTML dir অ্যাট্রিবিউট এবং লজিক্যাল CSS প্রপার্টি (margin-inline-start, padding-inline-end) ব্যবহার করা উচিত। একটি ফ্লেক্সবক্স লেআউটের অ্যাক্সেসিবিলিটি অডিট করার সময়, যেকোনো পুনর্বিন্যাস অর্থবহ কিনা তা চেক করুন, কিবোর্ড ট্যাব স্টপ একটি যৌক্তিক ভিজ্যুয়াল সিকোয়েন্সে চলে কিনা তা নিশ্চিত করুন, এবং যাচাই করুন যে ক্রমান্বয়ে নেভিগেশনের উপর নির্ভরশীল ব্যবহারকারীদের জন্য কোনো গুরুত্বপূর্ণ কনটেন্ট বাদ পড়ে বা ক্রম বিহীন নেই।