CSS-এ ফ্লেক্স এলিমেন্টের ইনলাইন-ব্লক প্যারেন্ট

প্যারেন্টের display প্রপার্টির জন্য flex মানের পরিবর্তে inline-flex মান সেট করা যেতে পারে। এই ক্ষেত্রে, এই প্যারেন্টটি একটি ইনলাইন-ব্লক এলিমেন্টের মতো আচরণ করবে।

উদাহরণস্বরূপ, যদি প্যারেন্টের প্রস্থ সেট না করা হয়, তবে এর প্রস্থ চাইল্ড এলিমেন্টগুলির প্রস্থ দ্বারা গঠিত হবে:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: inline-flex;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат: