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

HTML5/CSS Flexbox দিয়ে লিস্ট আইটেমকে অন্য কলামের হাইট অনুযায়ী ভERTICAL ALIGN করা

Flexbox দিয়ে কলাম বেসড লেআউটে ভার্টিক্যাল অ্যালাইনমেন্ট

র‍্যাপারকে ফ্লেক্স কন্টেইনার বানিয়ে কলামগুলো রো-তে লেআউট করুন। প্রতিটি কলামে flex: 1 0 33% দিয়ে সমান প্রস্থ দিন।

CSS

.col .content {
  margin-top: auto; /* কন্টেন্ট নিচে পুশ করবে */
}

HTML Струкচার


ফলাফল: সব কলাম সমান প্রস্থ, সবচেয়ে বড় কলামের হাইটে অন্যগুলো 늘어বে, এবং ছোট কলামের কন্টেন্ট নিচে অ্যালাইন হবে।

  1. CSS Height এবং Width: এলিমেন্টের আকার নিয়ন্ত্রণ করার সম্পূর্ণ গাইড

  2. Flexbox চাইল্ড এলিমেন্টের হাইট ভার্টিক্যালি স্ট্রেচ হয়া রোধ করা

  3. CSS দিয়ে সমান উচ্চতার কলাম তৈরি

  4. CSS Flexbox দিয়ে কলাম DIV-কে Left-Center-Right অ্যালাইন করা