CSS: حاوية Flexbox CSS

آخر تحديث: 2026-10-13

Flexbox هو طريقة تخطيط أحادية البُعد قوية تجعل من السهل محاذاة وتوزيع وترتيب العناصر داخل حاوية.

خصائص هذا القسم: flex-direction flex-wrap justify-content align-items align-content gap margin

1. خصائص حاوية Flex

(1) مرجع سريع

الخاصية	القيم	الغرض
`display: flex`	—	إنشاء حاوية فليكس
`flex-direction`	`row`، `row-reverse`، `column`، `column-reverse`	اتجاه المحور الرئيسي
`flex-wrap`	`nowrap`، `wrap`، `wrap-reverse`	هل العناصر تلتف
`justify-content`	`flex-start`، `flex-end`، `center`، `space-between`، `space-around`، `space-evenly`	محاذاة المحور الرئيسي
`align-items`	`flex-start`، `flex-end`، `center`، `stretch`، `baseline`	محاذاة المحور المتقاطع
`align-content`	`flex-start`، `flex-end`، `center`، `space-between`، `space-around`، `stretch`	محور متقاطع متعدد الأسطر
`gap`	`10px`، `10px 20px`	مسافة بين العناصر

2. flex-direction

يتحكم في اتجاه المحور الرئيسي:

▶ مثال

▶ جرّب الكود

3. justify-content

يُحاذ العناصر على طول المحور الرئيسي:

▶ مثال

▶ جرّب الكود

قيم شائعة:

flex-start: العناصر في البداية (افتراضي)
flex-end: العناصر في النهاية
center: العناصر مُوَسَّطة
space-between: مسافة متساوية بين العناصر
space-around: مسافة متساوية حول العناصر
space-evenly: مسافة متساوية بين وحول

4. align-items

يُحاذ العناصر على طول المحور المتقاطع:

▶ مثال

▶ جرّب الكود

5. flex-wrap

يتحكم في لف العناصر لأسطر جديدة:

▶ مثال

▶ جرّب الكود

6. gap

يُعيّن مسافة بين عناصر flex:

▶ مثال

▶ جرّب الكود

خصائص هذا القسم: flex-direction flex-wrap justify-content align-items align-content gap margin

❓ أسئلة شائعة

س هل يتغير اتجاه justify-content عندما يكون flex-direction هو column؟

ج نعم. justify-content يعمل دائماً على طول المحور الرئيسي. عندما يكون flex-direction: row، المحور الرئيسي أفقي؛ عندما يكون column، المحور الرئيسي يصبح عمودياً. تذكر: justify-content يتحكم في المحور الرئيسي، align-items يتحكم في المحور المتقاطع.

س متى أستخدم flex-wrap؟

ج عندما لا تناسب العناصر في سطر واحد. الافتراضي (nowrap) يضغط العناصر؛ wrap يتيح لها التدفق إلى السطر التالي. ضروري للتخطيطات المتجاوبة حيث يجب تكدس العناصر على شاشات أصغر.

س ما الفرق بين align-items وalign-content؟

ج align-items يتحكم في محاذاة عناصر سطر واحد (داخل كل سطر). align-content يتحكم في توزيع مسافة الأسطر المتعددة (يعمل فقط مع أسطر متعددة). سطر واحد: align-content يُتجاهل.

📖 ملخص

خصائص حاوية Flexbox تتحكم في السلوك "العام" — كيفية ترتيب العناصر ولفها ومحاذاها
تذكر: justify-content يتحكم في المحور الرئيسي، align-items يتحكم في المحور المتقاطع
إذا تغير flex-direction، هذان يتبادلان اتجاهاتهما الفعالة

📝 تمارين

أساسي

أنشئ حاوية flex بـ 5 عناصر. جرب جميع قيم flex-direction الأربع لمراقبة تغييرات الاتجاه.
وضح جميع قيم justify-content الست بلقطات شاشة للمقارنة.

متوسط

اضبط flex-wrap: wrap وراقب محاذاة الأسطر المتعددة بقيم align-content مختلفة.
قارن خاصية margin مع gap للمسافات — ا Appreciate راحة gap.

تحدٍ

أنشئ شريط تنقل متجاوب: سطح المكتب يحتوي على شعار يساراً وقائمة يميناً؛ المحمول يحتوي على شعار يساراً وهامبرغر يميناً والقائمة مخفية.
أنشئ قائمة بطاقات بـ justify-content: space-between للتوزيع المتساوي، آخر سطر محاذي لليسار.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن