Flexbox এর ডিফল্ট single-line behavior হলো Flex Container-এর ভেতরে থাকা Flex Itemsগুলো একক লাইন (single line) বা সারিতে সাজানো। এটি Flexbox-এর প্রথম এবং প্রধান আচরণ, যেখানে সমস্ত Flex Items একত্রে একটি সারিতে বা লাইনে রাখা হয়, যতক্ষণ না তাদের আকার বা কন্টেইনারের সাইজ তাদের একাধিক লাইনে সরানোর প্রয়োজন না হয়।
ডিফল্ট Single-Line Behavior কীভাবে কাজ করে?
- যখন আপনি
display: flex;ব্যবহার করেন, তখন Flex Items ডিফল্টভাবেflex-direction: row;(অর্থাৎ অনুভূমিকভাবে) সজ্জিত হয় এবং কন্টেইনারের মধ্যে একটি একক লাইন তৈরি হয়। - Flex Items এর মোট প্রস্থ (width) একত্রে কন্টেইনারের প্রস্থের সমান বা তার কম হওয়া পর্যন্ত তারা একক লাইনে অবস্থান করবে।
- যদি Flex Items এর মোট প্রস্থ কন্টেইনারের প্রস্থের চেয়ে বড় হয়ে যায়, তবে তারা স্বয়ংক্রিয়ভাবে সঠিকভাবে একাধিক লাইনে ভাগ হয়ে যাবে, যদি
flex-wrap: wrap;প্রপার্টি ব্যবহার করা না হয়।
ডিফল্ট Single-Line Behavior এর উদাহরণ
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 {
display: flex; /* Flexbox সক্রিয় */
}
.flex-item {
background-color: lightblue;
padding: 20px;
margin: 5px;
text-align: center;
}
আউটপুট:
এই কোডের মাধ্যমে Flex Items গুলো অনুভূমিকভাবে একক লাইনে সজ্জিত হবে, কারণ display: flex; এবং flex-direction: row; (ডিফল্ট) রয়েছে, এবং কন্টেইনারের প্রস্থ Flex Items গুলোর জন্য যথেষ্ট থাকবে।
Flex-wrap এবং Single-Line Behavior
Flexbox-এর ডিফল্ট behavior হলো একটি single-line layout, তবে যদি flex-wrap প্রপার্টি ব্যবহৃত হয়, তবে Flex Items একাধিক লাইনে ভাগ হয়ে যাবে।
flex-wrap: wrap;: এটি Flex Items গুলোর জন্য একাধিক লাইন তৈরি করতে সাহায্য করে, যদি তারা কন্টেইনারের মধ্যে একসাথে না স্যাঁটিয়ে থাকে।flex-wrap: nowrap;: এটি Flex Items গুলোকে একই লাইনে রাখে, যেটি Flexbox-এর ডিফল্ট আচরণ।
Flex-wrap এর ব্যবহার:
.flex-container {
display: flex;
flex-wrap: wrap; /* Flex Items গুলো একাধিক লাইনে যাবে, যদি প্রয়োজন হয় */
}
এভাবে, যখন কন্টেইনারের প্রস্থ Flex Items গুলোর প্রস্থের চেয়ে ছোট হয়ে যাবে, তখন Flex Items গুলো নতুন লাইনে চলে যাবে।
সারাংশ
Flexbox এর ডিফল্ট single-line behavior হলো Flex Items গুলোকে একক লাইনে (single line) সজ্জিত করা, যতক্ষণ না তাদের আকার কন্টেইনারের সাইজের সাথে খাপ খাচ্ছে। Flexbox এই behavior এর মাধ্যমে ওয়েব ডিজাইনে উপাদানগুলোর প্রাকৃতিক বিন্যাস নিশ্চিত করে, এবং পর্দার আকার অনুযায়ী এই layoutটি খুবই নমনীয়।
Read more
