Flexbox در CSS

Flexbox تکنیکی در CSS است که روند طراحی صفحات وب را بسیار ساده‌تر و کارآمدتر می‌کند. این ابزار به طراحان اجازه می‌دهد تا لایه‌بندی‌هایی پیچیده و قابل تغییر را به سادگی و با قدرت بیشتری پیاده‌سازی کنند. در حالی که درگذشته از float و positioning برای لایه‌بندی استفاده می‌شد، Flexbox نیاز به این تکنیک‌های قدیمی و دشوار را برطرف کرده است.

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

شروع کار با Flexbox به سادگی تعریف یک کانتینر Flex است. با استفاده از دستور display: flex;، می‌توانید به کانتینر بگویید که فرزندانش باید بر اساس قوانین Flexbox مرتب شوند. برخی از خصوصیات رایج که در Flexbox استفاده می‌شوند عبارتند از: justify-content، align-items، و flex-direction.

یکی دیگر از خصوصیات قدرتمند Flexbox، flex-wrap است. این خصوصیت به شما اجازه می‌دهد فرزندان کانتینر به صورت خودکار به خطوط جدید منتقل شوند در صورتی که فضای کافی برای نمایش در یک خط وجود ندارد. به کمک همه این ویژگی‌ها، Flexbox می‌تواند بسیاری از نیازهای لایه‌بندی را به سادگی برآورده کند.

برای درک بهتر، بیایید نگاهی به مثال ساده‌ای از Flexbox بیندازیم:

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

    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .item {
      flex: 1;
    }
  

در این مثال، یک کانتینر با سه آیتم داریم. با استفاده از display: flex; به کانتینر، آیتم‌های داخل آن به صورت یک ردیف نمایش داده می‌شوند.