Flexbox এর জন্য প্রাথমিক CSS কনফিগারেশন

Flexbox ব্যবহার শুরু করার জন্য HTML এবং CSS-এ কিছু প্রাথমিক কনফিগারেশন প্রয়োজন। Flexbox সক্রিয় করতে display: flex; প্রপার্টি ব্যবহৃত হয় এবং এটি Flex Container এবং Flex Items-এর মধ্যে সম্পর্ক স্থাপন করে। নিচে Flexbox-এর জন্য প্রয়োজনীয় প্রাথমিক সেটআপ তুলে ধরা হলো।

HTML গঠন

Flexbox কনফিগারেশনের জন্য HTML ফাইলটি নিম্নরূপ হতে পারে:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS প্রাথমিক কনফিগারেশন

Flex Container-এর জন্য কনফিগারেশন

Flex Container-এ Flexbox সক্রিয় করতে এবং এর প্রাথমিক নিয়ন্ত্রণ করতে নিচের CSS ব্যবহার করা হয়:

.flex-container {
  display: flex; /* Flexbox সক্রিয় করে */
  flex-direction: row; /* ডিফল্ট: অনুভূমিকভাবে বিন্যাস */
  justify-content: flex-start; /* অনুভূমিকভাবে বাম দিকে বিন্যাস */
  align-items: stretch; /* উল্লম্বভাবে সমস্ত আইটেম সমান উচ্চতায় টানটান */
  gap: 10px; /* Flex Items-এর মধ্যে ফাঁকা জায়গা */
}

Flex Items-এর জন্য কনফিগারেশন

Flex Items-এর আকার এবং বিন্যাস নিয়ন্ত্রণের জন্য নিচের CSS ব্যবহার করা যায়:

.flex-item {
  flex: 1; /* প্রতিটি আইটেম সমান জায়গা নেবে */
  padding: 20px;
  background-color: lightblue;
  text-align: center;
  border: 1px solid #ccc;
}

Flexbox প্রপার্টিসের সংক্ষিপ্ত বিবরণ

Flex Container-এর প্রপার্টিস

1. display: flex;
   • Flexbox লেআউট সক্রিয় করে।
   • display: inline-flex; ব্যবহার করলে ইনলাইন লেভেল কনটেইনার তৈরি হয়।
2. flex-direction
   • ফ্লেক্স আইটেমগুলোর বিন্যাসের দিক নির্ধারণ করে।
   • ডিফল্ট মান: row (বাম থেকে ডানে)।
3. justify-content
   • অনুভূমিক অক্ষে ফ্লেক্স আইটেমের বিন্যাস নির্ধারণ করে।
   • মান: flex-start, flex-end, center, space-between, space-around, space-evenly।
4. align-items
   • উল্লম্ব অক্ষে ফ্লেক্স আইটেমের বিন্যাস নির্ধারণ করে।
   • মান: stretch, flex-start, flex-end, center, baseline।
5. flex-wrap
   • আইটেমগুলো একাধিক লাইনে বিভক্ত হবে কিনা তা নির্ধারণ করে।
   • মান: nowrap (ডিফল্ট), wrap, wrap-reverse।
6. gap
   • ফ্লেক্স আইটেমগুলোর মধ্যে ফাঁকা জায়গা তৈরি করে।

Flex Items-এর প্রপার্টিস

1. order
   • ফ্লেক্স আইটেমের প্রদর্শনের ক্রম নির্ধারণ করে।
2. flex-grow
   • ফ্লেক্স আইটেম অতিরিক্ত জায়গা দখল করবে কিনা তা নির্ধারণ করে।
3. flex-shrink
   • ফ্লেক্স আইটেম সংকুচিত হবে কিনা তা নির্ধারণ করে।
4. flex-basis
   • ফ্লেক্স আইটেমের প্রাথমিক আকার নির্ধারণ করে।
5. align-self
   • নির্দিষ্ট একটি আইটেমের বিন্যাস কনটেইনারের align-items-কে ওভাররাইড করে।

উদাহরণ কোড

HTML

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background-color: #f0f0f0;
}

.flex-item {
  flex: 1;
  padding: 20px;
  background-color: #007bff;
  color: white;
  text-align: center;
}

আউটপুট

Flex Container-এর মধ্যে আইটেমগুলো অনুভূমিকভাবে সমানভাবে জায়গা নিয়ে বিন্যস্ত হবে। এই কনফিগারেশনটি Flexbox-এর মাধ্যমে জটিল লেআউট ডিজাইনের একটি সহজ এবং কার্যকর পদ্ধতি।