جلسه دوم – Flexbox در CSS: ساختار ردیف و ستون

1. display: flex

• فعال کردن حالت Flexbox برای کانتینر
• تمام آیتم‌های داخل کانتینر به صورت فلکس آیتم رفتار می‌کنند
• جایگزین مناسب برای float و inline-block در چینش ردیفی یا ستونی

2. flex-wrap

• کنترل نحوه شکستن خط آیتم‌ها وقتی فضا کم است:
  • nowrap → همه آیتم‌ها در یک خط قرار می‌گیرند (خط شکنی ندارد)
  • wrap → آیتم‌ها در صورت کمبود فضا به خط بعد منتقل می‌شوند
  • wrap-reverse → همان wrap ولی خط بعد از بالا شروع می‌شود

3. flex-direction

• کنترل جهت چینش آیتم‌ها در محور اصلی:
  • row → ردیفی از چپ به راست
  • row-reverse → ردیفی از راست به چپ
  • column → ستونی از بالا به پایین
  • column-reverse → ستونی از پایین به بالا

4. جمع‌بندی

• Flexbox جایگزین float و inline-block برای چینش آیتم‌هاست
• display: flex → فعال‌سازی فلکس
• flex-wrap → مدیریت شکست خط آیتم‌ها
• flex-direction → مدیریت جهت چینش ردیفی یا ستونی
• مثال عملی در کد شما:
  • .container → استفاده از flex-direction: column برای چینش ستونی
  • .container-float → همان چینش قدیمی با float