কিভাবে ফ্লেক্সবক্স চাইল্ড এলিমেন্টের উচ্চতাকে সিএসএসে উল্লম্বভাবে স্ট্রেচিং থেকে আটকানো যায়

ধরা যাক আপনার একটি ফ্লেক্সবক্স আছে ভিতরে একটি বোতাম সহ ধারক:

<div class="container">
  <button class="button">Button</button>
</div>

আপনি যদি justify-content এর সাথে অনুভূমিকভাবে বোতামটি (শিশু উপাদান) কেন্দ্রে সারিবদ্ধ করার চেষ্টা করেন এই মত সম্পত্তি:

.container {
  height: 300px;
  display: flex;
  justify-content: center;
}

তারপর বোতামের (শিশু উপাদান) উচ্চতা মূল উপাদানের উচ্চতা যাই হোক না কেন প্রসারিত হবে (এই ক্ষেত্রে 300px ):

যা সম্ভবত আপনি চান না!

ফ্লেক্স আইটেম প্রতিরোধ করার কয়েকটি উপায় আছে (একটি ফ্লেক্স পাত্রের শিশু) উল্লম্বভাবে প্রসারিত করা থেকে।

যদি আপনি ফ্লেক্স আইটেমগুলিকে align-items দিয়ে উল্লম্বভাবে সারিবদ্ধ করেন সম্পত্তি, প্রসারিত স্বয়ংক্রিয়ভাবে চলে যায়:

.container {
  height: 300px;
  display: flex;
  justify-content: center;

  /*Vertical center alignment:*/
  align-items: center;
}

কিন্তু আপনি যদি আপনার ফ্লেক্স পাত্রে ফ্লেক্স আইটেমগুলিকে উল্লম্বভাবে সারিবদ্ধ করতে না চান?

তারপর আপনি CSS height ব্যবহার করতে পারেন সম্পত্তির max-content ফ্লেক্স আইটেমের মান:

.button {
  height: max-content;
}

এখন আপনার ফ্লেক্স আইটেমের উচ্চতা তার বিষয়বস্তুর উচ্চতা দ্বারা নির্ধারিত হবে, যা এই বোতামের উদাহরণে পাঠ্য, যা 14px (+ বোতামের ডিফল্ট প্যাডিং):

এছাড়াও আপনি align-self ব্যবহার করতে পারেন ফ্লেক্স আইটেমের সম্পত্তি:

.button {
  align-self: flex-start;
}

এটি max-content ব্যবহার করে একই ফলাফল দেবে সাধারণ ব্যবহারের ক্ষেত্রে, তবে এটি আপনার নির্দিষ্ট প্রসঙ্গের উপর নির্ভর করে (উভয় চেষ্টা করুন)।