ওয়েব ডেভেলপমেন্ট জানুয়ারী ২০২৫ ব্যাচ - ক্লাস ৫ for CSS Flexbox

**

চলুন আমরা Flexbox কে অপারেশন থিয়েটরে নিয়ে যাই, দেখা যাক এর ভিতরে কি কি আছে এবং কতটুকু কাজে লাগে আমাদের Website এর কন্টেন্ট গুলোকে ইচ্ছেমতো নড়াচড়া করতে।

**



Flexbox কি?

Flexbox এর Flex বা Flexible- বলা যায় যা website এর content কে বিভিন্ন অবস্থানে বা কোণে মোড করা যায় ইচ্ছেমতো। অর্থাৎ; আমাদের website এ কিছু বক্স নেই আমরা সেই বক্সের ভিতরে কিছু ইলিমেন্ট থাকে, সেগুলোকে ইচ্ছে মতো নড়াচড়া করা যায় Flexbox দিয়ে সেজন্যোই Flex বলা হয়।

Flexbox এর Box- HTML দিয়ে আমরা যে কন্টেইনার গুলো বানাই সেগুলোকে Box বলে থাকি। যেমন:

Flexbox (Flexible Box) CSS এর একটি শক্তিশালী layout মডেল যা কন্টেইনারের ভিতরে থাকা এলিমেন্টগুলোকে খুব সহজে এবং কার্যকরভাবে সাজাতে সাহায্য করে। এটি বিশেষ করে ছোট এবং বড় স্ক্রীনের জন্য রেসপন্সিভ ডিজাইন তৈরি করতে ব্যবহৃত হয়।

আমাদের উদাহরণ হিসেবে, আমরা একটি গোডাউন (Flex Container) এবং তার ভিতরে বিভিন্ন সাইজের বক্স (Flex Items) নেব।




1. display: flex / inline-flex

Flexbox শুরু করতে প্রথমেই আমরা কন্টেইনারের display প্রপার্টি সেট করি।

.godown {
  display: flex; /* এটা কন্টেইনারকে Flexbox Container বানায় */
}

এটা দিয়ে গোডাউনকে কে Flexbox কন্টেইনার বানানো হলো, আর কন্টেইনারের ভিতরের বক্সগুলো flexible হয়ে যাবে containar এর row বা সারি বরাবর। আমরা চাইলে inline-flex ব্যবহার করতে পারি, যা কন্টেইনারকে inline ফরম্যাটে দেখাবে, কিন্তু তার ভিতরের আইটেমগুলো flexibly সাজানো থাকবে।




2. flex-direction

flex-direction দ্বারা আমরা কন্টেইনারের ভিতরে বক্সগুলো (item গুলো) কেমনভাবে সাজানো থাকবে তা বুঝবো।

.godown {
  flex-direction: row; /* বক্সগুলো বাম থেকে ডানে সাজবে অর্থাৎ MS Excel এ যে সারি তার মতোই*/
  flex-direction: column; /* বক্সগুলো উপর থেকে নিচে সাজবে অর্থাৎ MS Excel এ যে কলাম বা লম্বা লাইন খারা বরাবর দেখি তার মতোই */
}
  • row: বক্সগুলো horizontal / আনুভূমিক বরাবর (বাম থেকে ডানে) বসবে।
  • column: বক্সগুলো vertical / খাড়াভাবে (উপর থেকে নিচে) বসবে।

যেমন, যদি গোডাউনটি বড় হয় এবং আমরা চাই বক্সগুলো উপরে নিচে সাজুক, তখন আমরা flex-direction: column; ব্যবহার করব।




3. flex-wrap: বক্সগুলোকে লাইনে রাখার নিয়ন্ত্রণ

flex-wrap প্রপার্টি ব্যবহার করে Flexbox কন্টেইনারে থাকা বক্সগুলো (Flex Items) কীভাবে লাইনে সাজানো হবে তা নিয়ন্ত্রণ করা যায়।

যদি কন্টেইনারে জায়গা কম থাকে, flex-wrap এর মাধ্যমে বক্সগুলো পরবর্তী লাইনে যেতে পারে। এই প্রপার্টি প্রধানত তিনটি ভ্যালু সমর্থন করে:


Syntax ও Value:

.godown {
  display: flex;
  flex-wrap: nowrap;   /* এক লাইনে ফিট করার চেষ্টা করবে */
  flex-wrap: wrap;     /* পরের লাইনে যাবে যদি জায়গা না থাকে */
  flex-wrap: wrap-reverse; /* পরের লাইনে যাবে, কিন্তু নিচ থেকে শুরু করবে */
}

বিস্তারিত:

3.1. nowrap (ডিফল্ট ভ্যালু):

  • সব বক্স এক লাইনে রাখার চেষ্টা করে, কন্টেইনারের আকারের চেয়ে বড় হলেও।
  • এটি ব্যবহারের ফলে কিছু বক্স কন্টেইনারের বাইরে চলে যেতে পারে।

উদাহরণ:

.godown {
  display: flex;
  flex-wrap: nowrap;
}

ফলাফল:
বক্সগুলো এক লাইনে থাকবে, চাইলেই কন্টেইনারের বাইরে বেরিয়ে যেতে পারে।


3.2. wrap:

  • যদি এক লাইনে সব বক্স ফিট না হয়, তাহলে পরবর্তী লাইনে চলে যাবে।
  • এটি responsive layout এর জন্য খুবই উপযোগী।

উদাহরণ:

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

ফলাফল:
বক্সগুলো যথেষ্ট জায়গা না পেলে পরবর্তী লাইনে যাবে।


3.3. wrap-reverse:

  • wrap এর মতোই কাজ করে, তবে নতুন লাইন নিচ থেকে উপরের দিকে সাজানো হয়।

উদাহরণ:

.godown {
  display: flex;
  flex-wrap: wrap-reverse;
}

আউটপুট:
নতুন লাইনগুলো নিচের পরিবর্তে উপর থেকে শুরু হয়।

উদাহরণ:

মনে করুন আমাদের গোডাউনে অনেকগুলো বক্স রাখা আছে:

.godown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* বক্সগুলোর মধ্যে ফাঁকা */
  width: 500px; /* গোডাউনের প্রস্থ */
}

.box {
  width: 150px;
  height: 100px;
  background: lightblue;
  border: 1px solid #333;
}

HTML:

<div class="godown">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

Output:

  • যদি বক্সগুলো এক লাইনে না ফিট করে, তারা wrap ব্যবহার করলে পরবর্তী লাইনে যাবে।

কাজ:

  • Responsive Design: স্ক্রিন সাইজ অনুযায়ী বক্সগুলো wrap করে একাধিক লাইনে সাজানো যায়।
  • Content Organization: জায়গা বাঁচানোর জন্য অটোমেটিক লাইনে ভাঙা যায়।

flex-wrap এর সাহায্যে কন্টেইনারের ভিতরে বক্সগুলোর সঠিক জায়গা নিশ্চিত করা যায় এবং ফ্লেক্সবক্সকে আরও ফ্লেক্সিবল করা সম্ভব।




4. justify-content

justify-content দ্বারা আমরা বক্সগুলোর horizontal / আনুভূমিক alignment নিয়ন্ত্রণ করি, অর্থাৎ কন্টেইনারের ভিতরে বক্সগুলো কীভাবে বসবে তা control করে।

.godown {
  justify-content: space-between; /* বক্সগুলোর মাঝে সমান স্পেস */
}

নিশ্চিত! আমরা যখন Flexbox ব্যবহার করি, তখন justify-content প্রপার্টির মাধ্যমে Flex Container এর ভিতরের Flex Items গুলোকে horizontal (বাম থেকে ডানে) নির্দিষ্টভাবে সাজানোর জন্য বিভিন্ন ভ্যালু ব্যবহার করা হয়। চলুন, এই ভ্যালুগুলোর প্রতিটি সম্পর্কে বিস্তারিত আলোচনা করি।

4.1. flex-start: বক্সগুলো বামদিকে বক্সের শুরুতেই থেকে যাবে

flex-start এর মাধ্যমে Flex Items গুলো কন্টেইনারের শুরুতে (বাম দিকে) সাজানো হবে। এটি সাধারণত ব্যবহৃত হয় যখন আপনি চান বক্সগুলো বাম দিক থেকে শুরু হয়ে একসাথে জমে যাক।

.godown {
  justify-content: flex-start;
}
  • ব্যবহার: যখন আপনি চান বক্সগুলো কন্টেইনারের বাম পাশে সমবেত হয়ে একত্রিত হোক।
  • যেমন: উদাহরণস্বরূপ, যদি আপনি চান যে বিভিন্ন উপাদান (যেমন ন্যাভিগেশন লিঙ্ক) বাম দিক থেকে শুরু হয়ে সাজুক, তখন আপনি flex-start ব্যবহার করবেন।

4.2. flex-end: বক্সগুলো ডানদিকে চলে যাবে

flex-end এর মাধ্যমে Flex Items গুলো কন্টেইনারের শেষ প্রান্তে (ডান দিকে) সাজানো হবে। এটা যখন প্রয়োজন হয়, যখন আপনি চান যে সমস্ত বক্স ডানদিকে অটোমেটিক্যালি চলে যাবে।

.godown {
  justify-content: flex-end;
}
  • ব্যবহার: যখন আপনি চান বক্সগুলো কন্টেইনারের ডান পাশে একত্রিত হোক।
  • যেমন: যদি আপনার ওয়েব পেজে কোনো ন্যাভিগেশন মেনু থাকে এবং আপনি সেটা ডান দিকে রাখতে চান, তাহলে flex-end ব্যবহার করবেন।

4.3. center: বক্সগুলো মাঝখানে বসে যাবে

center এর মাধ্যমে Flex Items গুলো কন্টেইনারের মধ্যভাগে সেন্টার করা হবে। এটি অনেকসময় ব্যবহার করা হয় যখন আপনি চান যে বক্সগুলো স্ক্রীনের বা কন্টেইনারের মধ্যে সঠিকভাবে সেন্টার হয়ে থাকে।

.godown {
  justify-content: center;
}
  • ব্যবহার: যখন আপনি চান যে বক্সগুলো কন্টেইনারের ঠিক মাঝখানে সেন্টার হয়ে দেখাবে।
  • যেমন: উদাহরণস্বরূপ, আপনি যদি একটি লোগো বা একটি সেন্ট্রাল কন্টেন্ট (যেমন একটি মেনু) হেডারে সেন্টার করতে চান, তবে center ব্যবহার করবেন।

4.4. space-between: বক্সগুলোর মধ্যে সমান দূরত্ব হয়ে যাবে

space-between এর মাধ্যমে Flex Items গুলো কন্টেইনারে সমান দূরত্ব রেখে সাজানো হবে। এটি তখন ব্যবহার হয় যখন আপনি চান যে বক্সগুলো কন্টেইনারের মধ্যে সমানভাবে ছড়িয়ে পড়ুক, কিন্তু প্রথম এবং শেষ বক্সটি কন্টেইনারের প্রান্তে থাকবে।

.godown {
  justify-content: space-between;
}
  • ব্যবহার: যখন আপনি চান বক্সগুলো কন্টেইনারের মধ্যে সমান স্পেস দিয়ে সরানো হোক, যেখানে প্রথম এবং শেষ আইটেম কন্টেইনারের সীমানায় থাকবে।
  • যেমন: যদি আপনার ন্যাভিগেশন লিঙ্কগুলো বা বাটনগুলো সমান স্পেসে বিতরণ করতে চান, তবে space-between ব্যবহার করবেন। এটি সাইটের উপরের ন্যাভিগেশন মেনুতে খুব কার্যকরী।

4.5. space-around: বক্সগুলোর চারপাশে সমান দূরত্ব থাকবে

space-around এর মাধ্যমে Flex Items গুলো কন্টেইনারের মধ্যে সমান দূরত্বে থাকবে, তবে প্রতিটি বক্সের চারপাশে সমান গ্যাপ থাকবে। এখানে, প্রথম এবং শেষ বক্সের চারপাশে কিছু অতিরিক্ত স্পেস থাকবে, যা space-between এর সাথে পার্থক্য তৈরি করে।

.godown {
  justify-content: space-around;
}
  • ব্যবহার: যখন আপনি চান বক্সগুলো কন্টেইনারের মধ্যে সমান দূরত্বে এবং প্রতিটি বক্সের চারপাশে স্পেস রেখে সাজানো হোক।
  • যেমন: এটি ব্যবহৃত হতে পারে যখন আপনি চান যে বক্সগুলোর চারপাশে সমান দূরত্ব থাকতে এবং কন্টেইনারে আরও বড় স্পেস তৈরি করতে।



5. align-items

align-items ব্যবহার করে আমরা কন্টেইনারের ভিতরের বক্সগুলোর vertical alignment নিয়ন্ত্রণ করি।

.godown {
  align-items: center; /* বক্সগুলো vertical center এ থাকবে */
}

এখানে কিছু ভ্যালু এর বর্ননা দিলাম দেখে নিন:
এগুলো align-items প্রপার্টির ভ্যালু, যা Flexbox এর ভিতরের Flex Items গুলোর vertical alignment (উপরে, নিচে, মাঝখানে, stretched ইত্যাদি) নিয়ন্ত্রণ করে। চলুন, এগুলো বিস্তারিতভাবে দেখি:

5.1. flex-start: বক্সগুলো উপরে বক্সের শুরুতেই বসবে এটা default value

flex-start এর মাধ্যমে Flex Items গুলো কন্টেইনারের উপরের দিকে সাজানো হবে। এটি ব্যবহার করা হয় যখন আপনি চান যে বক্সগুলো কন্টেইনারের শীর্ষে অবস্থান করুক।

.godown {
  align-items: flex-start;
}
  • ব্যবহার: যখন আপনি চান বক্সগুলো কন্টেইনারের উপরে সোজা সাজানো হোক।
  • যেমন: যদি আপনার ওয়েব পেজের কোনও উপাদান (যেমন টেক্সট বা ছবি) উপরের দিকে থাকতে হয়, তবে flex-start ব্যবহার করবেন।

5.2. flex-end: বক্সগুলো নিচে সাজবে

flex-end এর মাধ্যমে Flex Items গুলো কন্টেইনারের নিচের দিকে / ফুটার বরাবর সাজানো হবে। এটি তখন ব্যবহৃত হয় যখন আমাদের দরকার হবে যে যে বক্সগুলো কন্টেইনারের নিচে অবস্থান করুক।

.godown {
  align-items: flex-end;
}
  • ব্যবহার: যখন আপনি চান বক্সগুলো কন্টেইনারের নিচে সাজানো হোক।
  • যেমন: যদি আপনার পেজে কোন কন্টেন্ট নিচে রাখতে চান (যেমন ফুটার), তবে flex-end ব্যবহার করবেন।

5.3. center: বক্সগুলো container এর মাঝখান বরাবর বসবে

center এর মাধ্যমে Flex Items গুলো কন্টেইনারের মাঝখানে সেন্টার করা হবে। এটি সবচেয়ে সাধারণ ব্যবহৃত alignment পদ্ধতি, যখন আপনি চান বক্সগুলো কন্টেইনারের মধ্যে সেন্টার হয়ে যায়।

.godown {
  align-items: center;
}
  • ব্যবহার: যখন আপনি চান বক্সগুলো কন্টেইনারের মধ্যে সেন্টার হয়ে দেখাবে।
  • যেমন: একটি সেন্ট্রাল কন্টেন্ট বা লোগো সেন্টার করতে, center ব্যবহার করা হয়।

5.4. stretch: বক্সগুলো কন্টেইনারের পুরো উচ্চতা ধরে যাবে

stretch এর মাধ্যমে Flex Items গুলো কন্টেইনারের পুরো উচ্চতা পর্যন্ত stretch (পোশানো) হবে, যদি তাদের নির্দিষ্ট উচ্চতা না দেওয়া থাকে। এটি খুবই উপকারী যখন আপনি চান বক্সগুলো কন্টেইনারের পুরো উচ্চতা ব্যবহার করুক।

.godown {
  align-items: stretch;
}
  • ব্যবহার: যখন আপনি চান বক্সগুলো কন্টেইনারের পুরো height ব্যবহার করে stretch করতে।
  • যেমন: যদি আপনি চাইছেন যে Flex Items গুলো কন্টেইনারের পুরো vertical space ব্যবহার করুক (যেমন একাধিক কলাম বা বক্স), stretch ব্যবহার করা হবে।

5.5. baseline: বক্সগুলোর বটম লাইন সোজা থাকবে

baseline এর মাধ্যমে Flex Items গুলো তাদের text baseline অনুযায়ী align হবে। এটা যখন উপকারী, যখন আপনার Flex Items গুলোর মধ্যে কিছু টেক্সট রয়েছে এবং আপনি চাইছেন যে তাদের বটম লাইন একে অপরের সাথে সোজা (alignment) হয়ে থাকে।

.godown {
  align-items: baseline;
}
  • ব্যবহার: যখন আপনি চান Flex Items গুলোর টেক্সটের বটম লাইন একে অপরের সাথে সোজা হোক।
  • যেমন: যদি আপনার Flex Items গুলোতে টেক্সট থাকে এবং আপনি চান যে তাদের বটম লাইন সোজা (একই baseline) থাকতে, তখন baseline ব্যবহার করা হয়।



6. align-self (Child Properties)

align-self হলো একটি CSS প্রপার্টি, যা Flexbox-এর মধ্যে প্রতিটি item বা বক্সের জন্য আলাদা করে alignment নির্ধারণ করতে ব্যবহৃত হয়। অর্থাৎ, যদি আপনি চান কোন একটি বক্স অন্যদের থেকে আলাদা জায়গায় থাকুক, তখন আপনি এই প্রপার্টি ব্যবহার করবেন।

উদাহরণ:

ধরা যাক, আপনার কাছে একটি Flexbox কন্টেইনার আছে এবং আপনি একটি বক্সকে আলাদা জায়গায় রাখতে চান। তখন আপনি সেই বক্সের জন্য align-self ব্যবহার করতে পারবেন।

.box {
  align-self: flex-start; /* এই বক্সটা উপরে থাকবে */
}

এখানে align-self এর বিভিন্ন মান:

  • flex-start: এই বক্সটা কন্টেইনারের উপরের দিকে থাকবে।
  • flex-end: এই বক্সটা কন্টেইনারের নিচের দিকে থাকবে।
  • center: এই বক্সটা কন্টেইনারের মাঝে থাকবে।
  • stretch: এই বক্সটা পুরো কন্টেইনারের উচ্চতা নিবে।

এভাবে, আপনি যদি চান কোন একটি বক্স অন্যদের থেকে আলাদা জায়গায় থাকে, তাহলে align-self প্রপার্টি দিয়ে সেটা নির্ধারণ করবেন।




7. order

order প্রপার্টি হলো Flexbox-এর অন্যতম শক্তিশালী ফিচার। এটি ব্যবহার করে Flex Items-এর প্রদর্শনের ক্রম পরিবর্তন করা যায়, যা Layout ডিজাইনকে আরও ফ্লেক্সিবল এবং ডাইনামিক করে তোলে। এই প্রপার্টি ডিজাইনিং এবং প্রোডাক্ট প্রায়োরিটাইজেশনে সময় বাঁচায় এবং আপনার কোডকে আরও কার্যকর এবং পরিচ্ছন্ন রাখতে সাহায্য করে।

Flexbox কন্টেইনারে একাধিক Flex Items (বক্স) থাকে, এবং এগুলো সাধারণত HTML কোডের সিকোয়েন্স অনুযায়ী সাজানো থাকে। কিন্তু আপনি যদি চান, কোনো নির্দিষ্ট বক্স আগে বা পরে দেখানো হোক, তখন order প্রপার্টি ব্যবহার করতে পারেন।


order প্রপার্টি কী?

order প্রপার্টি ব্যবহার করে Flex Items-এর অর্ডার বা র্যাঙ্ক (sequence) নির্ধারণ করা যায়।

  • ডিফল্টভাবে (default): সব বক্সের order প্রপার্টির ভ্যালু 0 থাকে।
  • ছোট order ভ্যালু: আগে আসে।
  • বড় order ভ্যালু: পরে আসে।

কীভাবে order কাজ করে?

  • HTML কোডে যেভাবে Flex Items লেখা হয়েছে, সেগুলো সিকোয়েন্স অনুযায়ী প্রদর্শিত হয়।
  • order প্রপার্টি ব্যবহার করলে HTML সিকোয়েন্স বদলানো ছাড়াই Flexbox কন্টেইনারে বক্সগুলোর প্রদর্শনের ক্রম (sequence) পরিবর্তন করা যায়।

আমরা একটা উদাহরণ দেখলেই বুঝতে পারবো:

ধরি, আপনার কাছে ৩টি বক্স আছে, এবং এগুলো HTML এ এই সিকোয়েন্সে লেখা:

<div class="container">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
</div>

এখন CSS দিয়ে এই বক্সগুলোর order পরিবর্তন করা যাক:

.container {
  display: flex;
}

.box-1 {
  order: 2; /* Box 1 কে পরে দেখাবে */
  background: #faa;
}

.box-2 {
  order: 3; /* Box 2 কে সবচেয়ে পরে দেখাবে */
  background: #afa;
}

.box-3 {
  order: 1; /* Box 3 কে প্রথমে দেখাবে */
  background: #aaf;
}

ফলাফল:

  • Box 3 → Box 1 → Box 2
  • Explanation:
    • Box 3-এর order 1, তাই এটি প্রথমে।
    • Box 1-এর order 2, তাই এটি দ্বিতীয়।
    • Box 2-এর order 3, তাই এটি তৃতীয়।

কেনো order এর এত প্রয়জনীয়রাতা:

7.1. ই-কমার্স প্রোডাক্ট লিস্টিং:

  • যদি কিছু প্রোডাক্ট প্রিমিয়াম হয় এবং সেগুলো প্রথমে দেখাতে চান, তবে order প্রপার্টি ব্যবহার করে সহজেই প্রিমিয়াম প্রোডাক্টকে প্রথমে নিয়ে আসা যায়।
.premium {
  order: 0; /* প্রথমে আসবে */
}

.regular {
  order: 1; /* পরে আসবে */
}

7.2. website এর ড্যাশবোর্ড ডিজাইন:

  • ড্যাশবোর্ডে কিছু গুরুত্বপূর্ণ তথ্য আগে দেখানো দরকার। order ব্যবহার করে আপনি ড্যাশবোর্ডের উইজেটগুলোর অগ্রাধিকার (priority) অনুযায়ী সাজাতে পারেন।

7.3. Website এর Responsive Design এর ক্ষেত্রে:

  • মোবাইল ভিউতে এবং ডেস্কটপ ভিউতে আলাদা অর্ডার প্রদর্শন করতে order খুবই কার্যকর।
/* মোবাইল ভিউ */
@media (max-width: 768px) {
  .menu {
    order: 1; /* প্রথমে দেখাবে */
  }
  .content {
    order: 2; /* পরে দেখাবে */
  }
}

/* ডেস্কটপ ভিউ */
@media (min-width: 769px) {
  .menu {
    order: 2; /* পরে দেখাবে */
  }
  .content {
    order: 1; /* প্রথমে দেখাবে */
  }
}

order এর সুবিধা:

  1. HTML পরিবর্তন ছাড়াই প্রদর্শনের ক্রম পরিবর্তন করা যায়।
  2. Responsive Design-এর জন্য গুরুত্বপূর্ণ।
  3. ডায়নামিক Layout তৈরি করা সহজ হয়।
  4. প্রোডাক্ট প্রায়োরিটি বা গুরুত্বপূর্ণ কন্টেন্ট আগে দেখানোর জন্য কার্যকর।



8. flex-grow, flex-shrink, flex-basis (Child Properties)

flex-grow, flex-shrink, এবং flex-basis: Flex Items-এর Child Properties

Flexbox কন্টেইনারের প্রতিটি Flex Item এর আকার (size) এবং প্রদর্শনের নিয়মগুলো নিয়ন্ত্রণ করতে flex-grow, flex-shrink, এবং flex-basis প্রপার্টি ব্যবহার করা হয়।

এগুলো একসাথে flex shorthand প্রপার্টি হিসেবেও ব্যবহার করা যায়।


8.1. flex-grow: বক্স বড় করার ক্ষমতা

flex-grow নির্ধারণ করে একটি বক্স অতিরিক্ত জায়গা পাওয়ার ক্ষেত্রে কতটা বড় হতে পারবে।

  • ডিফল্ট মান: 0 (অতিরিক্ত জায়গা পাবে না)।
  • বক্সটি যত বড় হওয়া উচিত, তার জন্য একটি আপেক্ষিক সংখ্যা (ratio) নির্ধারণ করা হয়।

উদাহরণ:

.box {
  flex-grow: 2; /* অন্য বক্সের তুলনায় দ্বিগুণ বড় হবে */
}

যদি তিনটি বক্সের flex-grow মান হয়:

  • Box 1: flex-grow: 1;
  • Box 2: flex-grow: 2;
  • Box 3: flex-grow: 3;

তাহলে অতিরিক্ত জায়গা 1:2:3 অনুপাতে ভাগ হবে।


8.2. flex-shrink: বক্স ছোট করার ক্ষমতা

flex-shrink নির্ধারণ করে একটি বক্স জায়গা সংকুচিত করার ক্ষেত্রে কতটা ছোট হতে পারবে।

  • ডিফল্ট মান: 1 (সব বক্স সমানভাবে সংকুচিত হবে)।
  • 0 মান দিলে বক্স সংকুচিত হবে না।

উদাহরণ:

.box {
  flex-shrink: 2; /* অন্য বক্সের তুলনায় দ্বিগুণ ছোট হবে */
}

যদি তিনটি বক্সের flex-shrink মান হয়:

  • Box 1: flex-shrink: 1;
  • Box 2: flex-shrink: 2;
  • Box 3: flex-shrink: 0;

তাহলে Box 3 সংকুচিত হবে না, এবং বাকি জায়গা 1:2 অনুপাতে ভাগ হবে।


8.3. flex-basis: প্রাথমিক আকার নির্ধারণ

flex-basis বক্সের প্রাথমিক আকার (initial size) নির্ধারণ করে, যা Flexbox লেআউটে প্রদর্শনের সময় ব্যবহৃত হয়।

  • ডিফল্ট মান: auto (বক্সের কনটেন্ট অনুযায়ী সাইজ নির্ধারণ হবে)।
  • নির্দিষ্ট মান দেওয়া যায়, যেমন: 100px, 20%, ইত্যাদি।

উদাহরণ:

.box {
  flex-basis: 200px; /* বক্সের প্রাথমিক প্রস্থ ২০০ পিক্সেল হবে */
}

গোডাউনের বক্স ডিজাইন থেকে আমরা একটু উদাহরণ দেখি

ধরি, আমাদের একটি গোডাউন আছে যেখানে ৩টি বক্স রয়েছে। আমরা প্রতিটি বক্সের সাইজ আলাদাভাবে নিয়ন্ত্রণ করতে চাই।

<div class="godown">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

CSS:

.godown {
  display: flex;
  width: 100%; /* পুরো কন্টেইনার */
  height: 300px;
  background: #f5f5f5;
}

.box {
  margin: 5px;
  color: white;
  text-align: center;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box1 {
  flex-grow: 1; /* অতিরিক্ত জায়গা কম পাবে */
  flex-shrink: 1; /* সংকুচিত হবে */
  flex-basis: 100px; /* প্রাথমিক প্রস্থ ১০০ পিক্সেল */
  background: #faa;
}

.box2 {
  flex-grow: 2; /* অতিরিক্ত জায়গা বেশি পাবে */
  flex-shrink: 0; /* সংকুচিত হবে না */
  flex-basis: 150px; /* প্রাথমিক প্রস্থ ১৫০ পিক্সেল */
  background: #afa;
}

.box3 {
  flex-grow: 3; /* সবচেয়ে বেশি অতিরিক্ত জায়গা পাবে */
  flex-shrink: 1; /* সংকুচিত হবে */
  flex-basis: 200px; /* প্রাথমিক প্রস্থ ২০০ পিক্সেল */
  background: #aaf;
}

কোডের output:

  • Box 1: প্রাথমিক সাইজ ১০০px, কম জায়গা পাবে।
  • Box 2: প্রাথমিক সাইজ ১৫০px, সংকুচিত হবে না, এবং বেশি জায়গা পাবে।
  • Box 3: প্রাথমিক সাইজ ২০০px, সবচেয়ে বেশি জায়গা পাবে।

flex-grow, flex-shrink, এবং flex-basis একসাথে ব্যবহার

flex প্রপার্টি দিয়ে এই তিনটি প্রপার্টি একত্রে ব্যবহার করা যায়:

.box {
  flex: flex-grow flex-shrink flex-basis;
}

উদাহরণ:

.box1 {
  flex: 1 1 100px; /* Grow: 1, Shrink: 1, Basis: 100px */
}

.box2 {
  flex: 2 0 150px; /* Grow: 2, Shrink: 0, Basis: 150px */
}

.box3 {
  flex: 3 1 200px; /* Grow: 3, Shrink: 1, Basis: 200px */
}

প্রয়জনীয়তা সমূহ দেখি

  1. রেস্পন্সিভ লেআউট:

    • বক্সগুলো স্ক্রিনের আকার অনুযায়ী বড় বা ছোট করা যায়।
    • প্রাথমিক সাইজ, বড় হওয়ার ক্ষমতা, এবং ছোট হওয়ার ক্ষমতা নিয়ন্ত্রণ করা সহজ।
  2. নিউজ ফিড বা গ্যালারি লেআউট:

    • প্রায়োরিটি অনুযায়ী বিভিন্ন সেকশন বড় বা ছোট করা যায়।
  3. ড্যাশবোর্ড ডিজাইন:

    • প্রতিটি উইজেটের সাইজ ডিফল্ট প্রস্থ এবং বড় হওয়ার ক্ষমতা অনুযায়ী নির্ধারণ করা যায়।

flex-grow, flex-shrink, এবং flex-basis Flexbox কন্টেইনারের আইটেমগুলোর সাইজিং এবং অ্যালাইনমেন্ট কাস্টমাইজ করার জন্য গুরুত্বপূর্ণ। এগুলো ব্যবহার করে আপনি বক্সগুলোর আকার, অতিরিক্ত জায়গা নেয়ার ক্ষমতা, সংকুচিত হওয়ার নিয়ম এবং প্রাথমিক সাইজ নির্ধারণ করতে পারবেন। Flexbox-কে আরও শক্তিশালী এবং কাস্টমাইজেবল করতে এই প্রপার্টিগুলো অত্যন্ত কার্যকর।




Flexbox-এর ব্যবহার একটু বুঝতে পারলেই অনেক সহজ এবং এটি রেস্পন্সিভ ডিজাইনের জন্য অনন্য। এটি এমন সব জটিল লেআউট তৈরিতে সহায়ক, যেখানে উপাদানগুলোর মধ্যে স্থান এবং সাইজ সামঞ্জস্য করা প্রয়োজন। যেমন:

  • রেস্পন্সিভ কার্ড লেআউট।
  • গ্যালারি বা ড্যাশবোর্ড ডিজাইন।
  • ফর্ম অ্যালাইনমেন্ট বা ন্যাভিগেশন বার। এমন আরো অনেক কিছু।

Flexbox শিখে ও সঠিকভাবে প্রয়োগ করে আপনি আপনার ওয়েব ডিজাইনকে আরও স্মার্ট, রেস্পন্সিভ, এবং ইউজার-ফ্রেন্ডলি করতে পারবেন।

Picture and Concept

20 Likes

ফাটাফাটি, দারুণ , চমৎকার।
Fantastic dissection of flexbox. :clap:

3 Likes

@zahidbenu অনেক ধন্যবাদ

3 Likes

অনেক সুন্দর করে explain করছেন ভাই.

2 Likes

@Monirul_Islam উপকার হলেই আলহামদুলিল্লাহ।

1 Like

@Moudud_Hoque ধন্যবাদ ভাই ইম্পরট্যান্ট টপিক শেয়ার করার জন্য।

1 Like

aj Flexbox niye onek confusion dur holo vai,
jajhakallh

অসাধারণ ভাই, জাজাকামুল্লাহ

অনেক ভালো করে বুজিয়েছেন ভাই, তার পরে ও বলবো যেনো flex অনেক টা হাড মনে হয়, flex এর উপরে আরো কিছু ক্লাস নিলে ভালো হতো । রাসেল ভাই চাইলে হবে, আশা করি।

2 Likes

ফ্লেক্স পারছিলাম তাই হোম ওয়ার্ক সাবমিট করি নাই। আপনার এই আর্টিকেল পড়ে অনেক হেল্প হলো ।এখন ফ্রগ গেম টা খেলেছি।।

1 Like

Practice korun, eto easy lagbe, kisui mne hbe na ar.

2 Likes

অনেক প্রাকটিস করুন, আয়ত্বে আসবে ইংশাআল্লাহ

1 Like

জ্বী, ভাইয়া দোয়া করবেন যেনো আরো উপকার করতে পারি আপনাদের।

1 Like

আলহামদুলিল্লাহ, শুনে ভালো লাগলো অনেক।

1 Like

দোয়া করবেন ভাইয়া এভাবে বাকিগুলো দিতে পারি।

1 Like

brother continue please, you take love form my warm heart :slight_smile:

2 Likes

Very nicely presented.

2 Likes

THank You so much, I’ll try Insha’Allah.

1 Like

দোয়া করবেন, বাকি ক্লাসগুলোও যেনো এভাবে করতে পারি।

1 Like

Moudud Hoque vai er post gula onek effective

1 Like