تنظیم اسکرولر روی یک فلکس‌باکس

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

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

برای این کار، معمولاً ابتدا نیاز داریم ظرفیت و یا محدودیت‌هایی را برای ظرف والد تعیین کنیم. با تنظیم overflow روی auto می‌توانیم به سادگی اسکرولر را اضافه کنیم. این ویژگی، زمانی که محتوا از ظرف والد بزرگ‌تر شود، به طور خودکار اسکرولر را نمایش می‌دهد.

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

برای مثال، به کد زیر دقت کنید که چگونگی تنظیم یک کانتینر فلکس‌باکس با قابلیت اسکرول را نشان می‌دهد:

    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
    </div>

    <style>
    .container {
      display: flex;
      flex-direction: column;
      overflow: auto;
      max-height: 200px;
      border: 1px solid #ccc;
    }
    .item {
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }
    </style>
  

در بخش زیرین کد، یک div به نام container داریم که دارای ویژگی display: flex; است.
سپس ویژگی flex-direction را با مقدار column تنظیم کرده‌ایم، به اینصورت که آیتم‌ها به صورت ستونی نمایش داده شوند.
ویژگی overflow: auto; باعث می‌شود تا زمانی که محتوا بیشتر از فضای قابل نمایش باشد، اسکرولر نمایش داده شود.
ویژگی max-height: 200px; ارتفاع ماکزیمم ظرف را تعیین می‌کند به طوری که اگر آیتم‌ها بیشتر شدند، اسکرول کنند.
علاوه بر آن، border و border-bottom را برای زیبایی به کد اضافه کرده‌ایم تا جداکننده‌ای بین آیتم‌ها باشد.