Flexbox للتخطيط
استخدم Flexbox لمحاذاة العناصر في صف أو عمود، وتوزيع المساحة، ولفّ المحتوى دون حيل float.
Flexbox للتخطيط درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هو Flexbox؟
إن Flexbox (تخطيط الصندوق المرن) نموذج تخطيط في CSS صُمّم للتخطيطات أحادية البعد، أي لتوزيع المساحة على صف أو عمود واحد. وهو يحل مشكلات لم تستطع التخطيطات المعتمدة على float التعامل معها بسلاسة.
تفعيل Flexbox
طبّق display: flex على الحاوية. وتصبح عناصرها التابعة المباشرة تلقائيًا عناصر flex. ولا تتأثر عناصر تلك العناصر التابعة.
.container {
display: flex;
}
/* All direct children are now flex items */flex-direction
تضبط المحور الرئيسي. row (الافتراضي): تُرتّب العناصر من اليسار إلى اليمين. row-reverse: من اليمين إلى اليسار. column: من الأعلى إلى الأسفل. column-reverse: من الأسفل إلى الأعلى.
.stack { display: flex; flex-direction: column; }
.row { display: flex; flex-direction: row; }justify-content — محاذاة المحور الرئيسي
توزّع المساحة على المحور الرئيسي. flex-start (الافتراضي)، flex-end، center، space-between، space-around، space-evenly.
.nav {
display: flex;
justify-content: space-between; /* logo left, links right */
}
.centered {
display: flex;
justify-content: center; /* items in the middle */
}align-items — محاذاة المحور المتقاطع
تحاذي العناصر على المحور المتقاطع (المتعامد مع المحور الرئيسي). stretch (الافتراضي)، center، flex-start، flex-end، baseline.
.card {
display: flex;
align-items: center; /* vertically center content */
}خاصية gap
تضيف gap: row-gap column-gap مسافة بين عناصر flex من دون استخدام margin. وهي أنظف بكثير من حيلة margin، ومدعومة على نطاق واسع في المتصفحات الحديثة.
.grid {
display: flex;
flex-wrap: wrap;
gap: 24px; /* 24px in all directions between items */
gap: 16px 24px; /* row-gap column-gap */
}flex-wrap
تتقلص عناصر flex افتراضيًا لتبقى في سطر واحد. ويتيح لها flex-wrap: wrap الانتقال إلى أسطر جديدة عندما لا تتسع لها المساحة. ادمجه مع gap لإنشاء شبكة متجاوبة بسيطة.
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, min-width */
}الاختصار flex للعناصر
تُستخدم الصيغة flex: grow shrink basis على عناصر flex. وتُعد flex: 1 اختصارًا لـ 1 1 0%، إذ تنمو العناصر بالتساوي وتتجاهل حجم محتواها. وتنشئ flex: 0 0 200px عنصرًا ثابتًا بعرض 200px.
.sidebar { flex: 0 0 240px; } /* fixed width */
.main { flex: 1; } /* takes remaining space */align-self
تتجاوز align-self على عنصر flex قيمة align-items الخاصة بالحاوية لهذا العنصر وحده. ويفيد ذلك في جعل عنصر واحد يحاذى بطريقة مختلفة عن العناصر الشقيقة له.
.container { display: flex; align-items: center; }
.tall-item { align-self: flex-start; }خاصية order
تتحكم order في الترتيب المرئي لعناصر flex من دون تغيير ترتيب HTML. والقيمة الافتراضية هي 0. وتظهر القيم الأقل أولًا. استخدمها باعتدال، لأنها تنشئ اختلافًا بين الترتيب المرئي وترتيب DOM/القراءة.
التوسيط باستخدام Flexbox
أبسط طريقة لتوسيط عنصر أفقيًا وعموديًا هي ضبط العنصر الأب على display: flex; justify-content: center; align-items: center.
.overlay {
position: fixed;
inset: 0; /* shorthand for top/right/bottom/left: 0 */
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.5);
}تحقّق سريعًا
أي خاصية في Flexbox توزّع المساحة بين العناصر على المحور الرئيسي؟
مراجعة: أساسيات Flexbox
طبّق display: flex على الحاوية. ويحدّد flex-direction: row أو column المحور. وتتحكم justify-content في المسافات على المحور الرئيسي. وتُستخدم align-items للمحور المتقاطع. وتضيف gap المسافات الفاصلة. ويتيح flex-wrap تعدد الأسطر. ويُستخدم اختصار flex على العناصر للتحكم في نموها. إنه نظام تخطيط مرن أحادي البعد.
الأسئلة الشائعة
هل درس «Flexbox للتخطيط» مجاني؟
نعم — نص درس «Flexbox للتخطيط» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «Flexbox للتخطيط»؟
استخدم Flexbox لمحاذاة العناصر في صف أو عمود، وتوزيع المساحة، ولفّ المحتوى دون حيل float. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «Flexbox للتخطيط»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.