جلسه اول – Flexbox در CSS: آشنایی با Flex

1. Flex چیست

• ماژولی در CSS برای چینش انعطاف‌پذیر آیتم‌ها
• جایگزین بهتر برای روش‌های قدیمی مانند float و inline-block
• مناسب برای چیدمان ردیفی و ستونی و مدیریت فاصله‌ها و تراز آیتم‌ها

2. Container (کانتینر)

• المانی که Flexbox روی آن فعال می‌شود (display: flex)
• پراپرتی‌های مهم کانتینر:
  • display: flex → فعال کردن فلکس
  • flex-direction → جهت چینش آیتم‌ها (row, row-reverse, column, column-reverse)
  • flex-wrap → مدیریت شکست خط آیتم‌ها (nowrap, wrap, wrap-reverse)
  • justify-content → تراز آیتم‌ها در محور اصلی
  • align-items → تراز آیتم‌ها در محور فرعی

3. Item (آیتم)

• هر المانی که داخل کانتینر قرار دارد و فلکس آیتم محسوب می‌شود
• پراپرتی‌های مهم آیتم:
  • flex-grow → امکان گسترش نسبت به آیتم‌های دیگر
  • flex-shrink → امکان کوچک شدن نسبت به آیتم‌های دیگر
  • flex-basis → اندازه اولیه قبل از اعمال رشد یا کوچک شدن
  • align-self → تراز آیتم نسبت به محور فرعی (می‌تواند مستقل از align-items کانتینر باشد)

4. جمع‌بندی

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