কম্পিউটার টিউটোরিয়াল

CSS Flexbox Layout Module

ফ্লেক্সবক্স লেয়াউট মডিউল ব্যবহার করে ওয়েব পেজে নমনীয় এবং রেসপন্সিভ লেয়াউট ডিজাইন করা হয়। এতে কন্টেইনার, ফ্লেক্স আইটেম ইত্যাদি থাকে।

কন্টেইনারের প্রোপার্টিগুলো:

  • flex-direction - আইটেমের দিকনির্দেশনা
  • flex-wrap - র‍্যাপ আচরণ
  • flex-flow - শর্টহ্যান্ড
  • justify-content - মেইন অক্ষ বিন্যাস
  • align-items - ক্রস অক্ষ বিন্যাস
  • align-content - লাইন বিন্যাস (র‍্যাপ থাকলে)

ফ্লেক্সবক্স এক-মাত্রিক (1D) লেয়াউটের জন্য আদর্শ, যেখানে আইটেমগুলো এক লাইনে বা এক কলামে সাজানো হয়।

  1. CSS দিয়ে রিসপন্সিভ ব্লগ লে আউট (Responsive Blog Layout) তৈরি করা

  2. CSS দিয়ে ৪-কলাম লেআউট গ্রিড (4-Column Layout Grid) তৈরি করা

  3. CSS Flexbox-এ আইটেমের জন্য ফিক্সড উইডথ (Fixed Width) সেট করা

  4. HTML-এ ফ্লেক্সবক্স (Flexbox) লে আউট তৈরি করা