طَبِّقْهاتعلّم المبدأ، وطبّقه بيدكمقرر 131 · تقنيات تطوير الواجهات الأمامية
الدرس 20 · الوحدة 6: تنسيق صفحات الويب باستخدام CSS

ترتيب العناصر بـ Flexbox

الأداة الأهم لترتيب أجزاء الصفحة: صفوف، وأعمدة، وتوسيط في سطرين. ⏱ نحو 25 دقيقة.

display: flex
بعد هذا الدرس ستستطيع أن:
  • تحوّل الحاوية إلى حاوية مرنة بـ display: flex.
  • توزع العناصر بـ justify-content وتحاذيها بـ align-items.
  • تبني شريط تنقل وصف بطاقات.
  • تستخدم flex-wrap و gap و flex: 1، وتوسّط عنصرًا تمامًا.
جرّب بنفسك أسئلة التقييم

١مشكلة: العناصر تحت بعضها

العناصر الكتلية مثل <div> تأتي تحت بعضها. فكيف نضع البطاقات الثلاث في صف، أو الشعار يمينًا والروابط يسارًا؟ الجواب سطر واحد على الحاوية الأم: display: flex.

<div class="row">  <div class="card">1</div>  <div class="card">2</div>  <div class="card">3</div></div>
index.html

الحاوية .row صارت حاوية مرنة، وأبناؤها المباشرون صاروا عناصر مرنة تصطف في صف. و gap المسافة بينها.

انتبه: الصفحة عربية من اليمين إلى اليسار، فالصف يبدأ من اليمين. لهذا يظهر الصندوق 1 أقصى اليمين.

٢جرّب بنفسك: لوحة التحكم

غيّر القيم وراقب كيف تتحرك الصناديق، والقاعدة المكتوبة تحتها:

index.html
الخاصيةتتحكم فيأشهر القيم
justify-contentالتوزيع على الاتجاه الرئيسي (أفقيًّا في الصف).flex-start و center و space-between
align-itemsالمحاذاة على الاتجاه المتعامد (رأسيًّا في الصف).stretch و center
flex-directionاتجاه الصف: أفقي أو رأسي.row و column
gapالمسافة بين العناصر.12px

٣شريط التنقل في سطرين

<header class="bar">  <b>بُنّ</b>  <nav>    <a href="#">الرئيسية</a>    <a href="#">القائمة</a>    <a href="#">اتصل</a>  </nav></header>
index.html

space-between دفع الشعار إلى أقصى اليمين والقائمة إلى أقصى اليسار. والقائمة نفسها حاوية مرنة ثانية تصفّ الروابط.

٤الالتفاف والتمدد

إذا لم تتسع الشاشة للبطاقات، نسمح لها بالنزول إلى سطر جديد بـ flex-wrap: wrap. و flex: 1 تجعل العناصر تتقاسم المساحة بالتساوي:

<div class="grid">  <div class="card">بايثون</div>  <div class="card">الويب</div>  <div class="card">قواعد البيانات</div>  <div class="card">الأمن</div></div>
index.html

flex: 1 1 140px تعني: تمدّد لتملأ المساحة، وتقلّص إن لزم، وعرضك الأساسي 140px. اضغط «جرّب وعدّل» ثم زر 📱 لترى البطاقات تلتف في الجوال.

٥التوسيط في المنتصف تمامًا

أشهر سؤال في CSS: كيف أوسّط شيئًا أفقيًّا ورأسيًّا؟ مع Flexbox صار ثلاثة أسطر:

<div class="center"><p>في المنتصف تمامًا</p></div>
index.html

توقّع وتحقّق

أين نكتب display: flex؟

الأم تصبح حاوية مرنة.

شعار يمينًا وروابط يسارًا:

يوزّع على الطرفين.

توسيط رأسي في صف مرن:

الاتجاه المتعامد.

لتنزل البطاقات إلى سطر جديد عند ضيق الشاشة:

الالتفاف.

الخلاصة

تحدٍّ برمجي: ترويسة وبطاقات الدورات

متقدم

رتّب صفحة مركز التدريب بـ Flexbox: ترويسة فيها الشعار والقائمة على الطرفين، وثلاث بطاقات دورات في صف.

المطلوب:
  • الترويسة header حاوية مرنة، والشعار والقائمة على الطرفين (space-between)، ومتوسطة رأسيًّا.
  • روابط nav في صف بمسافة gap.
  • الحاوية .courses حاوية مرنة تلتف (wrap) بمسافة gap.
  • البطاقات .course تتمدد بالتساوي لتملأ الصف (flex: 1 أو flex: 1 1 140px).
👀 اعرض شكل الناتج المطلوب
الناتج المطلوب
✓ التحقق الآلي من حلّك:
  • header مرنة: space-between ومتوسطة رأسيًّا.
  • روابط nav في صف بمسافة gap.
  • .courses مرنة تلتف بمسافة.
  • البطاقات تتمدد بالتساوي (flex-grow: 1).

💡 تلميح 1
header { display: flex; justify-content: space-between; align-items: center; }
💡 تلميح 2
.course { flex: 1; } يجعلها متساوية.

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

<header>  <b class="logo">مركز المبرمج</b>  <nav>    <a href="#">الرئيسية</a>    <a href="#">الدورات</a>    <a href="#">اتصل</a>  </nav></header> <div class="courses">  <div class="course">بايثون</div>  <div class="course">تطوير الويب</div>  <div class="course">قواعد البيانات</div></div>
انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←