روش‌های جلوگیری از گسترش یک کانتینر فلکس در حین پر کردن فضای عمودی

مقدمه

در دنیای طراحی وب، یکی از چالش‌هایی که ممکن است با آن مواجه شوید این است که بخواهید یک کانتینر فلکس را از گسترش بیش از حد در حین پر کردن فضای عمودی باز دارید. این موضوع در موارد بسیاری کاربرد دارد، برای مثال وقتی بخواهید المان‌های فرزند در یک کانتینر به صورت متناسب و مرتبه‌دار چیده شوند بدون اینکه خود کانتینر ارتفاع اضافه‌ای بگیرد.

فلکس‌باکس به طور پیش‌فرض به المان‌ها اجازه می‌دهد که در فضای موجود در کانتینر توزیع و پر شوند. این ویژگی خوبی است ولی گاهی اوقات ممکن است باعث شود کانتینر به ارتفاعی بزرگ‌تر از حد نیاز برسد، و این ممکن است مسائل غیرمنتظره‌ای را در چینش ایجاد کند.

اولین اقدامی که می‌توان برای مدیریت این موضوع انجام داد استفاده از ویژگی‌هایی مانند align-items و justify-content است. این ویژگی‌ها کنترل بیشتری بر چگونگی توزیع المان‌ها در فضای کانتینر ایجاد می‌کنند. اضافه کردن align-items: center; به کانتینر، برای مثال، باعث می‌شود که المان‌ها در مرکز فضای عمودی کانتینر قرار گیرند.

استفاده از ارتفاع پیش‌فرض

یکی دیگر از راهکارهای مهم، استفاده از مقادیر ارتفاع پیش‌فرض است. با تعیین یک حداکثر ارتفاع برای کانتینر، می‌توانید از پر شدن بیش از حد جلوگیری کنید. این کار را با ویژگی max-height انجام دهید. همچنین، استفاده از مقادیر نسبی برای ارتفاع می‌تواند به شما در کنترل اندازه بهترمانه کمک کند.

به همین ترتیب، استفاده از overflow: hidden; می‌تواند هرگونه آزمایشی از چگونگی گسترش محتوا در کانتینر را متوقف کند. این ویژگی تضمین می‌کند که حتی اگر المان‌های داخلی به طور کامل مشاهده نشوند، فضای اضافی نخواهند گرفت.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
  overflow: hidden;
}

توضیح خط به خط کد