CSS Flexbox و CSS Grid دو سیستم قدرتمند و مدرن برای چیدمان (Layout) در CSS هستند که جایگزین بسیاری از روش‌های قدیمی و پیچیده مانند استفاده از float یا position های متعدد شده‌اند. این دو ابزار، انعطاف‌پذیری و کنترل بی‌نظیری بر روی نحوه قرارگیری عناصر در صفحه وب ارائه می‌دهند.

۱. CSS Flexbox (چیدمان انعطاف‌پذیر):

Flexbox برای چیدمان عناصر در یک بُعد (یک ردیف یا یک ستون) طراحی شده است. این سیستم بسیار کارآمد است برای توزیع فضا بین آیتم‌ها و تراز کردن آن‌ها.

  • مفاهیم کلیدی:

  • Flex Container (کانتینر فلکس): عنصری که display: flex; یا display: inline-flex; بر روی آن اعمال می‌شود. این کانتینر، آیتم‌های درون خود را مدیریت می‌کند.

  • Flex Items (آیتم‌های فلکس): عناصر فرزند مستقیم کانتینر فلکس.

  • Main Axis (محور اصلی): جهتی که آیتم‌های فلکس در آن چیده می‌شوند. این محور می‌تواند افقی (پیش‌فرض) یا عمودی باشد.

  • Cross Axis (محور متقاطع): محوری که عمود بر محور اصلی است.

  • خصوصیات مهم برای Flex Container:

  • display: flex;: کانتینر را به یک فلکس کانتینر تبدیل می‌کند.

  • flex-direction:: جهت محور اصلی را تعیین می‌کند (row, row-reverse, column, column-reverse).

  • justify-content:: نحوه تراز کردن آیتم‌ها را در طول محور اصلی مشخص می‌کند (flex-start, flex-end, center, space-between, space-around, space-evenly).

  • align-items:: نحوه تراز کردن آیتم‌ها را در طول محور متقاطع مشخص می‌کند (flex-start, flex-end, center, baseline, stretch).

  • flex-wrap:: تعیین می‌کند که آیا آیتم‌ها باید در صورت عدم فضای کافی به خط بعدی منتقل شوند یا خیر (nowrap, wrap, wrap-reverse).

  • خصوصیات مهم برای Flex Items:

  • order:: ترتیب نمایش آیتم‌ها را تغییر می‌دهد (اعداد کوچکتر اولویت دارند).

  • flex-grow:: تعیین می‌کند که یک آیتم چقدر باید فضا را در صورت وجود فضای خالی اضافه، اشغال کند.

  • flex-shrink:: تعیین می‌کند که یک آیتم چقدر باید در صورت کمبود فضا، فشرده شود.

  • flex-basis:: اندازه اولیه آیتم قبل از توزیع فضای اضافی.

  • flex:: ترکیب خلاصه‌شده‌ای از flex-grow, flex-shrink, و flex-basis.

  • align-self:: تراز کردن یک آیتم خاص در محور متقاطع، که بر align-items والد اولویت دارد.

  • کاربردها: ناوبری‌ها (Navigation Bars)، لیست‌های آیتم‌ها، فرم‌ها، کارت‌های محتوا، و هر چیدمانی که نیاز به توزیع فضا و تراز کردن در یک ردیف یا ستون دارد.

۲. CSS Grid (شبکه‌بندی):

Grid برای چیدمان عناصر در دو بُعد (ردیف‌ها و ستون‌ها) طراحی شده است. این سیستم برای ایجاد طرح‌بندی‌های پیچیده و ساختاریافته صفحه وب ایده‌آل است.

کلیدواژه ها : Flex Container-Flex Items-Cross Axis-Main Axis-flex-grow-CSS Grid-شبکه‌بندی-کاربردها