CSS-এ ফ্লেক্সে টাইলগুলির সমস্যা
টাইলের প্রথম সমস্যাটি মূলত অবিলম্বে স্পষ্ট
- প্যারেন্টকে স্পষ্টভাবে উচ্চতা নির্দিষ্ট করতে হয়
এটি খুবই অসুবিধাজনক। সর্বোপরি, আমাদের কাছে
এমনটি হতে পারে যে ব্লকের সংখ্যা গতিশীলভাবে পরিবর্তিত হবে
এবং তাদের সংখ্যা কখনও কম হবে,
কখনও 9-এর বেশি হবে।
আর দ্বিতীয় সমস্যাটি দেখা দেবে যদি ব্লকের সংখ্যা এমন হয় যে শেষ সারিতে পর্যাপ্ত সংখ্যক ব্লক থাকবে না। এই ক্ষেত্রে, শেষ সারিটি ভয়ানক দেখাবে:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>
.parent {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
দেখা যাচ্ছে যে এমনকি অনুভূমিকভাবে
space-between মানটি আমাদের ক্ষেত্রে
খারাপভাবে কাজ করে।
সারসংক্ষেপ: যদি আপনার চাইল্ড এলিমেন্টের সংখ্যা
সর্বদা স্থির থাকে এবং প্যারেন্টে স্বাভাবিকভাবে ফিট হয়,
তাহলে space-between-এ টাইল
একটি মোটামুটি সুবিধাজনক জিনিস। অন্যথায়,
অন্য কিছু নিয়ে আসতে হবে।
12টি এলিমেন্ট দেওয়া আছে। এগুলি থেকে
প্রতি সারিতে 4টি এলিমেন্ট সহ একটি টাইল তৈরি করুন,
প্রতিটি এলিমেন্টের প্রস্থ 100px এবং তাদের মধ্যে দূরত্ব
20px।
12টি এলিমেন্ট দেওয়া আছে। এগুলি থেকে
প্রতি সারিতে 3টি এলিমেন্ট সহ একটি টাইল তৈরি করুন,
প্রতিটি এলিমেন্টের প্রস্থ 150px এবং তাদের মধ্যে দূরত্ব
10px।
