التخطيط مع Flexbox

ما هو Flexbox؟

Flexbox نظام تخطيط يجعل ترتيب العناصر ومحاذاتها أمرًا سهلًا. نفعّله بوضع display: flex على العنصر الأب (الحاوية):

.container {
  display: flex;
}

الآن كل العناصر الأبناء تصطفّ في صفّ واحد أفقيًا.

المحاذاة الأفقية والعمودية

.container {
  display: flex;
  justify-content: center; /* المحاذاة على المحور الأفقي */
  align-items: center;     /* المحاذاة على المحور العمودي */
  height: 200px;
}

التوسيط المثالي (أشهر استخدام)

توسيط عنصر في منتصف الشاشة تمامًا:

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

جرّبها بنفسك

غيّر قيمة justify-content (مثلًا space-between أو flex-start) وشاهد كيف تتحرّك المربّعات مباشرة:

الاتجاه والالتفاف

.container {
  display: flex;
  flex-direction: column; /* عمودي بدل أفقي */
  flex-wrap: wrap;        /* ينزل العناصر لسطر جديد عند الضيق */
  gap: 12px;
}

🎉 أكملت أساسيات CSS! الآن تستطيع بناء صفحات منسّقة ومتجاوبة. الخطوة الطبيعية التالية: مسار جافاسكريبت لإضافة التفاعل.