Flexbox এডিটর

Flexbox ভিজ্যুয়াল এডিটর কী?#

Flexbox হলো CSS লেআউট ইঞ্জিন যা এলিমেন্টগুলোকে একটি একক দিকে (একটি সারি বা একটি কলাম) সাজাতে এবং তাদের মধ্যে অবশিষ্ট স্থান বিতরণ করতে ব্যবহৃত হয়। এটি এমন প্রশ্নের উত্তর দেয় যা আগে float, ঋণাত্মক মার্জিন এবং ট্রায়াল-অ্যান্ড-এরর প্রয়োজন করত: “এটি উল্লম্বভাবে কীভাবে কেন্দ্রে আনব?”, “এই তিনটি কলামকে কীভাবে সমান উচ্চতায় আনব?”, “একটি আইটেমকে কীভাবে একদম ডানে ঠেলে দেব যখন বাকিরা বামে থাকবে?”। একবার বুঝলে আপনি প্রায় প্রতিটি পৃষ্ঠায় এটি ব্যবহার করবেন; তার আগে, প্রপার্টির নামগুলো (justify-content, align-items, flex-grow) অভিজ্ঞ ডেভেলপারদেরও হোঁচট খাওয়ায়, কারণ স্পেকটি সাধারণ ইংরেজি শব্দকে খুব সুনির্দিষ্ট লেআউট অর্থে ওভারলোড করে।

এই পৃষ্ঠাটি একটি লাইভ Flexbox প্লেগ্রাউন্ড। আপনি বাম সাইডবারে কন্টেইনার প্রপার্টি এবং প্রতি-আইটেম ওভাররাইড টিউন করেন; ডান পেনটি সাথে সাথে ফলাফল দেখায় এবং যা তৈরি করেছে তার সঠিক, কপি-পেস্ট-প্রস্তুত CSS লেখে। এর উদ্দেশ্য হলো অনুমান করা বন্ধ করা যে কোন মান কী করে এবং এর বদলে পরিবর্তন করার সাথে সাথে প্রভাব দেখা — তারপর যে নিয়মটি কাজ করেছে তা কপি করা।

যেভাবে ব্যবহার করবেন#

লেআউটটি কন্ট্রোলের একটি সাইডবার এবং একটি প্রিভিউ + CSS আউটপুট প্যানে বিভক্ত।

1. কন্টেইনার সেট করুন। সাইডবারের ড্রপডাউনগুলো ব্যবহার করুন:
   • দিক — row, row-reverse, column, column-reverse।
   • জাস্টিফাই কন্টেন্ট — মূল অক্ষ বরাবর অবশিষ্ট স্থান বিতরণ করে: flex-start, center, flex-end, space-between, space-around, space-evenly।
   • আইটেম সারিবদ্ধ — চৌকাঠ অক্ষ বরাবর চিলড্রেন সাজায়: stretch, flex-start, center, flex-end, baseline।
   • র‍্যাপ — nowrap সবকিছু এক লাইনে রাখে; wrap এবং wrap-reverse চিলড্রেনকে নতুন লাইনে প্রবাহিত হতে দেয়।
   • কন্টেন্ট সারিবদ্ধ — শুধুমাত্র তখন আবির্ভূত হয় যখন র‍্যাপিং চালু থাকে; এটি র‍্যাপ করা চিলড্রেনের লাইনগুলো ফাঁক দেয়।
   • গ্যাপ — 0 থেকে 64 px পর্যন্ত একটি স্লাইডার; লাইভ মানটি লেবেলের পাশে পড়া যায়।
2. আইটেমগুলো পরিচালনা করুন। আইটেম হেডারের অধীনে, + আইটেম যোগ করুন (+ Add item) আরেকটি flex চাইল্ড যোগ করে। প্রতিটি আইটেম সারি গ্রো, শ্রিংক, বেসিস, ক্রম, এবং নিজ সারিবদ্ধ (align-self — কন্টেইনারের align-items-এর একটি প্রতি-চাইল্ড ওভাররাইড) উন্মোচন করে। একটি চাইল্ড তার মুছুন বোতাম দিয়ে মুছুন।
3. প্রিভিউটি দেখুন। ডানদিকের বড় বাক্সটি একটি প্রকৃত flex কন্টেইনার — প্রতিটি পরিবর্তন সাথে সাথে পুনরায় আঁকে।
4. CSS কপি করুন। তৈরি করা নিয়ম ব্লকটি প্রিভিউয়ের নিচে থাকে। এটি নিতে কপি ক্লিক করুন। যখন সমস্ত আইটেম একই মান ভাগ করে, একটি একক .item ব্লক নির্গত হয়; যেকোনো আইটেম আলাদা হওয়ার সাথে সাথে, আউটপুটটি প্রতি চাইল্ডে একটি .item:nth-child(N) ব্লকে স্যুইচ করে যাতে প্রতিটি ওভাররাইড অস্পষ্ট না হয়।

প্রধান বৈশিষ্ট্য#

• এক স্থানে কন্টেইনার এবং প্রতি-চাইল্ড প্রপার্টি। Flexbox সম্পর্কে কিছুই লুকানো নেই — flex-direction, উভয় অ্যালাইনমেন্ট অক্ষ, র‍্যাপিং, gap, এবং প্রতি-আইটেম grow/shrink/basis/order/align-self সবই লাইভ।
• সঠিক, ন্যূনতম CSS আউটপুট। align-content শুধুমাত্র তখন নির্গত হয় যখন র‍্যাপিং সত্যিই চালু থাকে (এটি একটি একক লাইনে কিছু করে না); সমান আইটেম একটি ব্লকে ভেঙে যায়; order এবং align-self শুধুমাত্র তখন আবির্ভূত হয় যখন নন-ডিফল্ট। আউটপুট হলো সবচেয়ে ছোট নিয়ম যা আপনি যা দেখেন তা পুনরুত্পাদন করে।
• flex শর্টহ্যান্ড, সঠিকভাবে। প্রতিটি চাইল্ডকে flex: <grow> <shrink> <basis> হিসেবে সিরিয়ালাইজ করা হয় — ক্যানোনিক্যাল তিন-মান রূপ যা শর্টহ্যান্ডের অনুপস্থিত মানগুলোর আশ্চর্যজনক ডিফল্ট এড়ায়।
• বেসিস যাচাই করা হয়। auto, 0, 200px, 50%, বা 10rem টাইপ করুন এবং এটি গ্রহণ করা হয়; একটি অবৈধ বেসিস চিহ্নিত করা হয় এবং নীরবে ভাঙা CSS তৈরি করার বদলে auto-এ ফিরে যায়।
• প্রিভিউ বাম-থেকে-ডানে বাধ্যতামূলক। Flexbox-এর row বাম-থেকে-ডানে সিম্যান্টিক্স হিসেবে সংজ্ঞায়িত, তাই প্রিভিউটি পৃষ্ঠার ভাষা নির্বিশেষে LTR পিন করা — আপনি যা দেখেন তা আপনার স্টাইলশিট যা করবে তার সাথে মেলে।

বিস্তারিত উদাহরণ#

একটি সাধারণ লেআউট: একটি হেডার সারি যাতে বামে একটি লোগো পিন করা, একটি শিরোনাম যা অবশিষ্ট স্থান নেয়, এবং একটি অ্যাকশন ডানে পিন করা — একটি নির্দিষ্ট গ্যাপ সহ সমানভাবে বিতরণ।

• দিক: row
• জাস্টিফাই কন্টেন্ট: space-between
• আইটেম সারিবদ্ধ: center
• র‍্যাপ: nowrap
• গ্যাপ: 16px
• আইটেম: তিনটি চিলড্রেন, মাঝেরটিতে গ্রো 1 যাতে এটি অবশিষ্ট স্থান শোষণ করে, বাকিগুলো ডিফল্ট flex: 0 1 auto-এ।

তৈরি CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}

.item:nth-child(1) {
  flex: 0 1 auto;
}

.item:nth-child(2) {
  flex: 1 0 auto;
}

.item:nth-child(3) {
  flex: 0 1 auto;
}

যেহেতু দ্বিতীয় চাইল্ড বড় হয় এবং বাকিগুলো নয়, আউটপুটটি সঠিকভাবে তিনটি পৃথক nth-child ব্লক ব্যবহার করে। এটি যেকোনো প্রকল্পে ফেলুন এবং লোগো বাম প্রান্তকে জড়িয়ে ধরে, অ্যাকশন ডানকে জড়িয়ে ধরে, এবং শিরোনাম মাঝটি পূরণ করে — কোনো float নেই, কোনো মার্জিন নেই।

সাধারণ জিজ্ঞাসা#

justify-content বনাম align-items — কোনটি কোনটি?#

justify-content সর্বদা মূল অক্ষ বরাবর কাজ করে (দিক যা flex-direction সেট করে — একটি row-তে অনুভূমিক, একটি column-এ উল্লম্ব)। align-items সর্বদা চৌকাঠ অক্ষ বরাবর কাজ করে (মূল অক্ষের লম্ব)। তাই একটি row-তে, justify-content বাম/ডান ফাঁক নিয়ন্ত্রণ করে এবং align-items উপর/নিচ অ্যালাইনমেন্ট নিয়ন্ত্রণ করে। দিক column-এ উল্টে দিন এবং তারা ভূমিকা অদলবদল করে। “justify = মূল, align = চৌকাঠ” মনে রাখা সবচেয়ে সাধারণ Flexbox বিভ্রম থেকে আপনাকে রক্ষা করে।

flex-grow কখন সত্যিই কিছু করে?#

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

আমার gap কেন দেখাচ্ছে না?#

তিনটি সাধারণ কারণ: চিলড্রেনের একটি নির্দিষ্ট প্রস্থ আছে যা কন্টেইনার সম্পূর্ণভাবে পূরণ করে (গ্যাপের জন্য কোনো স্থান নেই), flex-wrap: nowrap চিলড্রেনকে গ্যাপ-সচেতন লেআউটে র‍্যাপ হওয়ার বদলে ওভারফ্লো করতে বাধ্য করছে, বা চিলড্রেনের একটি মার্জিন দৃশ্যত গ্যাপকে মাস্ক করছে। এখানকার স্লাইডারটি 64 px পর্যন্ত যায়; আপনার যদি আরও প্রয়োজন হয়, অন্তর্নিহিত প্রপার্টিটি যেকোনো দৈর্ঘ্য গ্রহণ করে, তাই CSS কপি করুন এবং আপনার নিজের ফাইলে gap বাড়ান।

আউটপুট nth-child ব্যবহার করে — আমি কি এর বদলে একটি ক্লাস ব্যবহার করতে পারি?#

অবশ্যই। .item:nth-child(N) নির্বাচকগুলো নির্গত হয় কারণ আইটেম আলাদা হলে তারা প্রিভিউয়ের সাথে অস্পষ্টভাবে ম্যাপ করে। প্রকৃত কোডে, সেগুলোকে আপনার নিজের ক্লাসে (.logo, .title, .action) অদলবদল করুন — ভেতরের ঘোষণাগুলো অভিন্ন থাকে। যখন প্রতিটি চাইল্ড মেলে, টুলটি ইতিমধ্যে একটি শেয়ার্ড .item ব্লক নির্গত করে যা আপনি এক স্থানে পুনরায় নামকরণ করতে পারেন।