جلسه سوم – Flexbox در CSS: تراز المان‌ها

1. flex-flow

• ترکیبی از دو پراپرتی:
  • flex-direction → جهت چینش آیتم‌ها
  • flex-wrap → نحوه شکست خط آیتم‌ها

• مثال:

  flex-flow: wrap row;
  

2. justify-content

• کنترل تراز آیتم‌ها در محور اصلی:
  • flex-start → آیتم‌ها به ابتدا محور می‌چسبند
  • flex-end → آیتم‌ها به انتهای محور می‌چسبند
  • center → آیتم‌ها وسط محور قرار می‌گیرند
  • space-between → فاصله مساوی بین آیتم‌ها، اولین و آخرین کنار لبه
  • space-around → فاصله مساوی اطراف هر آیتم

3. align-items

• کنترل تراز آیتم‌ها در محور فرعی:
  • stretch → آیتم‌ها تا پر کردن ارتفاع کانتینر کشیده می‌شوند
  • flex-start → آیتم‌ها به ابتدای محور فرعی می‌چسبند
  • flex-end → آیتم‌ها به انتهای محور فرعی می‌چسبند
  • center → وسط محور فرعی
  • baseline → تراز بر اساس خط پایه متن

4. Prefect Centering

• وسط‌چین کردن دقیق یک المان داخل کانتینر:

   

  display: flex;
  justify-content: center; /* محور اصلی */
   align-items: center;     /* محور فرعی */ 

• جایگزین روش قدیمی position + transform که پیچیده‌تر و کمتر پاسخگو بود.

5. جمع‌بندی

• Flexbox ابزار ساده و انعطاف‌پذیر برای چینش ردیفی و ستونی است.
• محور اصلی → justify-content
• محور فرعی → align-items
• flex-flow → جهت و شکست خط آیتم‌ها را مدیریت می‌کند.