ফ্লেক্সবক্স (Flexbox)

ফ্লেক্সবক্স(বা Flexible Box Layout) হলো CSS3 এর একটি লেআউট মডেল, যা ডেভেলপারদের ওয়েব পেজের এলিমেন্টগুলোকে আরও সহজে এবং কার্যকরভাবে সারিবদ্ধ (align), বিতরণ (distribute), এবং স্থানান্তর (arrange) করতে সাহায্য করে, বিশেষ করে যখন লেআউটটি বিভিন্ন স্ক্রিন সাইজে প্রতিক্রিয়াশীল (responsive) হতে হয়। Flexbox মূলত ওয়েব পেজের কন্টেইনারের অভ্যন্তরে উপাদানগুলোর (items) অবস্থান, আকার এবং ফাঁকা স্থান নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়।

Flexbox: বিস্তারিত বাংলা টিউটোরিয়াল

ভূমিকা

Flexbox (Flexible Box Layout) হলো CSS-এর একটি শক্তিশালী লেআউট মডিউল, যা রেসপন্সিভ এবং ডাইনামিক লেআউট ডিজাইন করতে সাহায্য করে। এটি কনটেন্টের অবস্থান, আকার এবং ব্যবধান সহজেই কনট্রোল করতে পারে। Flexbox-এর মাধ্যমে এক বা একাধিক এলিমেন্টকে এক সারিতে (Row) বা এক কলামে (Column) বসানো এবং স্বয়ংক্রিয়ভাবে সেগুলোর সাইজ অ্যাডজাস্ট করা যায়, যা বিশেষ করে রেসপন্সিভ ডিজাইন তৈরির জন্য খুব কার্যকর।

Flexbox এর মূল ধারণা

Flexbox এর মুল দুটি উপাদান:

1. Flex Container: যেটি Flexbox-এ অন্যান্য উপাদান ধারণ করে। এটিকে Flexbox কন্টেইনার বলা হয়।
2. Flex Items: Flexbox কন্টেইনারের ভিতরের প্রতিটি উপাদানকে Flex Items বলা হয়, যেগুলোর লেআউট Flexbox নিয়ন্ত্রণ করে।

Flexbox এর ইতিহাস

Flexbox প্রথমে CSS3 এর একটি মডিউল হিসেবে পরিচিত হয়েছিল, যা ২০০৯ সালে প্রস্তাবিত হয়েছিল এবং পরবর্তী সময়ে ২০১২ সালে এর সাপোর্ট বিভিন্ন ব্রাউজারে অন্তর্ভুক্ত করা হয়। Flexbox মূলত রেসপন্সিভ এবং আধুনিক ওয়েব ডিজাইনকে সহজ এবং কার্যকর করার জন্য তৈরি করা হয়েছিল।

Flexbox এর প্রধান প্রোপার্টিজ

Flexbox লেআউট সিস্টেমের বেশ কিছু প্রোপার্টি আছে, যা Flex Container এবং Flex Items এর লেআউট এবং অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়। নিচে Flexbox এর প্রধান প্রোপার্টিগুলো আলোচনা করা হলো:

১. Flex Container এর প্রোপার্টি

Flex Container নির্ধারণ করতে আমরা display: flex; ব্যবহার করি। নিচে Flex Container এর বিভিন্ন প্রোপার্টি এবং তাদের কাজ নিয়ে আলোচনা করা হলো:

display: flex;

Flexbox কনটেইনার তৈরি করার জন্য এটি ব্যবহার করা হয়। এটি এলিমেন্টগুলিকে Flex Items-এ পরিণত করে।

.container {
  display: flex;
}

flex-direction

Flex Items এর অবস্থান নিয়ন্ত্রণ করে। এর মান হতে পারে:

• row (ডিফল্ট) : আইটেমগুলো এক সারিতে বসানো হয়।
• row-reverse : আইটেমগুলো এক সারিতে, কিন্তু বিপরীত দিক থেকে বসানো হয়।
• column : আইটেমগুলো এক কলামে বসানো হয়।
• column-reverse : আইটেমগুলো এক কলামে, কিন্তু বিপরীত দিক থেকে বসানো হয়।

.container {
  display: flex;
  flex-direction: row; /* বা column */
}

justify-content

Flex Items-কে প্রধান (main) অ্যাক্সিস বরাবর সরানোর জন্য ব্যবহৃত হয়। এর মান হতে পারে:

• flex-start : আইটেমগুলো শুরু থেকে সরানো হবে।
• flex-end : আইটেমগুলো শেষে সরানো হবে।
• center : আইটেমগুলো কেন্দ্রস্থলে সরানো হবে।
• space-between : প্রথম এবং শেষ আইটেমের মধ্যে সমান ব্যবধান থাকবে।
• space-around : আইটেমগুলোর চারদিকে সমান ব্যবধান থাকবে।

.container {
  display: flex;
  justify-content: center;
}

align-items

Flex Items-কে ক্রস (cross) অ্যাক্সিস বরাবর সরানোর জন্য ব্যবহৃত হয়। এর মান হতে পারে:

• stretch (ডিফল্ট) : আইটেমগুলো সমানভাবে প্রসারিত হবে।
• flex-start : আইটেমগুলো ক্রস অ্যাক্সিসের শুরুতে সরানো হবে।
• flex-end : আইটেমগুলো ক্রস অ্যাক্সিসের শেষে সরানো হবে।
• center : আইটেমগুলো ক্রস অ্যাক্সিসের কেন্দ্রস্থলে সরানো হবে।
• baseline : আইটেমগুলোর টেক্সট বেসলাইন বরাবর সংযুক্ত হবে।

.container {
  display: flex;
  align-items: center;
}

flex-wrap

যখন Flex Items গুলো একটি লাইনে ফিট না হলে, তাদের একাধিক লাইনে ছড়িয়ে দেওয়ার জন্য ব্যবহৃত হয়। এর মান হতে পারে:

• nowrap : (ডিফল্ট) এক লাইনে সব আইটেম থাকবে।
• wrap : প্রয়োজন হলে আইটেমগুলো একাধিক লাইনে ফিট হবে।
• wrap-reverse : বিপরীতভাবে একাধিক লাইনে ফিট হবে।

.container {
  display: flex;
  flex-wrap: wrap;
}

align-content

যখন Flex Container-এর মধ্যে একাধিক লাইনে আইটেম থাকে, তখন এই প্রোপার্টি আইটেমগুলোর মধ্যে ভার্টিকাল স্পেস নিয়ন্ত্রণ করে। এর মান হতে পারে:

• flex-start : শুরুতে অবস্থান করবে।
• flex-end : শেষে অবস্থান করবে।
• center : কেন্দ্রে অবস্থান করবে।
• space-between : আইটেমের লাইনের মধ্যে সমান ফাঁক থাকবে।
• space-around : আইটেমের চারদিকে সমান ফাঁক থাকবে।
• stretch : সমস্ত লাইন সমানভাবে প্রসারিত হবে।

.container {
  display: flex;
  align-content: center;
}

২. Flex Items এর প্রোপার্টি

order

Flex Items এর ক্রম নিয়ন্ত্রণ করে। ডিফল্টভাবে, সব আইটেমের order এর মান থাকে ০। আপনি কোনো আইটেমের order মান বাড়িয়ে বা কমিয়ে তার স্থান পরিবর্তন করতে পারেন।

.item {
  order: 2;
}

flex-grow

Flex Items এর বৃদ্ধির জন্য ব্যবহৃত হয়। যখন Container এ অতিরিক্ত স্থান থাকে, তখন আইটেমটি কতটুকু প্রসারিত হবে তা নির্ধারণ করতে flex-grow ব্যবহার করা হয়। ডিফল্ট মান ০।

.item {
  flex-grow: 1;
}

flex-shrink

Flex Items এর সংকোচনের জন্য ব্যবহৃত হয়। যখন Container এ স্থান সংকীর্ণ হয়, তখন আইটেমটি কতটুকু সংকুচিত হবে তা নির্ধারণ করতে flex-shrink ব্যবহার করা হয়। ডিফল্ট মান ১।

.item {
  flex-shrink: 1;
}

flex-basis

Flex Items এর প্রাথমিক আকার নির্ধারণ করে। এটি আইটেমটির আকারের প্রাথমিক ভিত্তি নির্ধারণ করে।

.item {
  flex-basis: 200px;
}

align-self

Flex Items-এর নিজস্ব ক্রস অ্যাক্সিস অনুযায়ী সেটিং করার জন্য ব্যবহৃত হয়। এটি align-items প্রোপার্টির উপর ভিত্তি করে কাজ করে, তবে একক আইটেমের জন্য এটি প্রযোজ্য।

.item {
  align-self: center;
}

Flexbox এর কাজের ধাপ

১. Flex Container এবং Flex Items তৈরি করা

CSS কোড:

.container {
  display: flex;
  justify-content: space-around;
}

.item {
  background-color: lightblue;
  padding: 20px;
  margin: 10px;
  border: 1px solid #ddd;
}

২. Flex Items এর পজিশন এবং আকার নিয়ন্ত্রণ করা

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.item {
  background-color: lightgreen;
  padding: 30px;
  flex-grow: 1;
  margin: 10px;
}

৩. Multiple lines তৈরি করা (Flex-wrap ব্যবহার)

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  background-color: lightcoral;
  padding: 20px;
  margin: 10px;
  flex-basis: 30%;
}

Flexbox এর ব্যবহার

Flexbox মূলত ব্যবহৃত হয়:

• রেসপন্সিভ লেআউট ডিজাইন: Flexbox এর মাধ্যমে ওয়েবপেজের কনটেন্ট বিভিন্ন স্ক্রিন সাইজ অনুযায়ী সাজানো যায়।
• নেভিগেশন বার: Flexbox ব্যবহার করে সহজে রেসপন্সিভ নেভিগেশন বার তৈরি করা যায়।
• কার্ড লেআউট: Flexbox ব্যবহার করে গ্রিড সিস্টেম ছাড়াই কার্ড লেআউট তৈরি করা যায়।
• এলিমেন্ট সেন্টার করা: Flexbox-এর সাহায্যে কনটেন্টকে উল্লম্ব এবং অনুভূমিকভাবে সহজে সেন্টার করা যায়।

Flexbox এর সুবিধা

1. সহজে রেসপন্সিভ ডিজাইন: Flexbox স্বয়ংক্রিয়ভাবে কনটেন্টকে স্ক্রিন সাইজ অনুযায়ী অ্যাডজাস্ট করতে সক্ষম।
2. কোনো গ্রিড প্রয়োজন নেই: Flexbox দিয়ে গ্রিড ব্যবহারের প্রয়োজন ছাড়াই কনটেন্টের সঠিক অবস্থান নিশ্চিত করা যায়।
3. ডাইনামিক লেআউট: Flexbox ডাইনামিকভাবে কনটেন্ট এবং তাদের ফ্লেক্সিবিলিটি নিয়ন্ত্রণ করতে পারে।
4. কেন্দ্রীয় অবস্থান: Flexbox দিয়ে সহজেই কনটেন্টকে উল্লম্ব এবং অনুভূমিকভাবে সেন্টার করা যায়।

Flexbox এর অসুবিধা

1. ব্রাউজার সাপোর্ট: পুরানো ব্রাউজারগুলো Flexbox সম্পূর্ণভাবে সাপোর্ট করে না।
2. জটিলতা: বড় বা জটিল লেআউটের ক্ষেত্রে Flexbox এর কাজ কিছুটা জটিল হতে পারে।
3. বহু লাইনে কাজ করার সীমাবদ্ধতা: Flexbox একাধিক লাইনে কাজ করতে পারে, তবে গ্রিড সিস্টেমের মতো ভালো পারফরম্যান্স দেয় না।

Flexbox বনাম CSS Grid

Flexbox শেখার জন্য রিসোর্স

1. CSS-Tricks Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
2. MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
3. YouTube টিউটোরিয়াল: "Flexbox Tutorial" নামে বিভিন্ন YouTube চ্যানেলে টিউটোরিয়াল পাওয়া যায়।

কিওয়ার্ড

• Flex Container: যে কনটেইনারে Flex Items থাকে।
• Flex Items: Flex Container-এর ভিতরে থাকা উপাদান।
• justify-content: প্রধান এক্সিস বরাবর আইটেমগুলোর অবস্থান নিয়ন্ত্রণ করে।
• align-items: ক্রস অ্যাক্সিস বরাবর আইটেমগুলোর অবস্থান নিয়ন্ত্রণ করে।
• flex-wrap: আইটেমগুলো একাধিক লাইনে থাকবে কিনা তা নিয়ন্ত্রণ করে।

উপসংহার

Flexbox হলো CSS এর অন্যতম শক্তিশালী লেআউট সিস্টেম, যা ওয়েব ডিজাইনারদের রেসপন্সিভ এবং ডাইনামিক লেআউট ডিজাইন করতে সহায়ক। এর সরলতা, ফ্লেক্সিবিলিটি এবং রেসপন্সিভ ফিচারগুলো Flexbox কে অত্যন্ত কার্যকর করে তুলেছে। যদিও জটিল লেআউটের জন্য CSS Grid এর প্রয়োজন হতে পারে, Flexbox ছোট থেকে মাঝারি আকারের লেআউটের জন্য আদর্শ।