الدرس 7: Flexbox | المستوى الثاني

👨‍💻

كتبه: فريق أكاديمية البرمجة

تم تحديثه: 10 يوليو 2026 | مدة القراءة: 18 دقيقة

🔍 ليه Flexbox غيّر قواعد اللعبة في CSS؟

قبل Flexbox (2012)، ترتيب العناصر في CSS كان كابوس — خاصة التوسيط العمودي (Vertical Centering) اللي كان بيحتاج hacks معقدة. من خلال 8 سنوات في تطوير المواقع، Flexbox هو الأداة اللي باستخدمها في 80% من حالات التخطيط.

في الدرس ده هنتعلم:

✅ إزاي Flexbox بيشتغل (الحاوية vs العناصر)
✅ justify-content — التحكم في المحاذاة الأفقية
✅ align-items — التحكم في المحاذاة العمودية
✅ flex-wrap — التعامل مع الشاشات الصغيرة
✅ flex-grow, flex-shrink, flex-basis — التحكم في الأحجام
✅ 3 أمثلة عملية: Navbar, Cards, Sidebar

⚠️ نصيحة من خبرة: Flexbox مش مناسب لكل حاجة — للتخطيطات ثنائية الأبعاد (صفوف وأعمدة معًا) استخدم CSS Grid. Flexbox للتخطيطات أحادية البعد (صف أو عمود واحد). هنتعلم Grid في الدرس الجاي!

📖 ما هو Flexbox؟

Flexbox (Flexible Box Layout) هو نظام تخطيط في CSS بيخليك ترتب العناصر في صف (row) أو عمود (column) مع التحكم الكامل في:

📐 التوزيع: إزاي العناصر تتقسم المسافة
🎯 المحاذاة: وضع العناصر أفقيًا وعموديًا
📏 الأحجام: إزاي العناصر تكبر أو تصغر
🔄 الترتيب: تغيير ترتيب العناصر بدون تعديل HTML

مفهوم الحاوية (Container) والعناصر (Items)

Flexbox بيعتمد على فكرة بسيطة: فيه حاوية (Container) وفيها عناصر (Items). الحاوية هي اللي بتتحكم في التخطيط الكلي، والعناصر بتتحكم في نفسها كأفراد.

<!-- ✅ هيكل Flexbox -->
<div class="container">  <!-- الحاوية (Flex Container) -->
    <div class="item">1</div>  <!-- عنصر (Flex Item) -->
    <div class="item">2</div>  <!-- عنصر (Flex Item) -->
    <div class="item">3</div>  <!-- عنصر (Flex Item) -->
</div>

/* ✅ تفعيل Flexbox على الحاوية */
.container {
    display: flex;  /* ده كل اللي محتاجه! */
}
        

💡 لاحظ: لما تضيف display: flex على الحاوية، العناصر الداخلية بتتحول لـ "Flex Items" تلقائيًا — مش محتاج تضيف أي حاجة على العناصر نفسها!

🎯 خصائص الحاوية (Container Properties)

الخصائص دي بتتحكم في التخطيط الكلي للعناصر جوه الحاوية.

1️⃣ flex-direction — تحديد الاتجاه

بتحدد إذا كانت العناصر هتترتب أفقيًا (row) أو عموديًا (column).

/* ✅ الاتجاه الأفقي (الافتراضي) */
flex-direction: row;            /* يسار → يمين */
flex-direction: row-reverse;    /* يمين → يسار (للعربية!) */

/* ✅ الاتجاه العمودي */
flex-direction: column;         /* أعلى → أسفل */
flex-direction: column-reverse; /* أسفل → أعلى */
        

🎯 row-reverse للعربية: في المواقع العربية (RTL)، row-reverse بيخلي العناصر تترتب من اليمين لليسار — ده مناسب للغة العربية. بس الأفضل هو استخدام dir="rtl" في HTML عشان Flexbox يتكيف تلقائيًا.

2️⃣ justify-content — المحاذاة على المحور الرئيسي

المحور الرئيسي هو الاتجاه اللي حددته في flex-direction. لو row، ده بيكون المحور الأفقي. لو column، بيكون المحور العمودي.

/* ✅ justify-content — التحكم في التوزيع الأفقي */
justify-content: flex-start;    /* البداية (يسار في row) */
justify-content: flex-end;      /* النهاية (يمين في row) */
justify-content: center;        /* الوسط */
justify-content: space-between; /* توزيع: الأول والآخر في الأطراف */
justify-content: space-around;  /* توزيع: مسافات متساوية مع هوامش */
justify-content: space-evenly;  /* توزيع: مسافات متساوية تمامًا */
        

القيمة	الوظيفة	متى نستخدمها؟
`flex-start`	كل العناصر في البداية	Navbar بروابط في اليمين
`flex-end`	كل العناصر في النهاية	زر "تسجيل" في آخر Navbar
`center`	كل العناصر في الوسط	عنوان في وسط الصفحة
`space-between`	الأول في البداية، الآخر في النهاية، الباقي متوزع	Navbar: Logo \| روابط \| زر تسجيل
`space-around`	مسافات متساوية حول كل عنصر	أيقونات التواصل الاجتماعي
`space-evenly`	مسافات متساوية تمامًا بين كل العناصر	بطاقات متساوية المسافة

3️⃣ align-items — المحاذاة على المحور العرضي

المحور العرضي هو العكس — لو row، ده بيكون المحور العمودي. الخاصية دي بتتحكم في "الارتفاع" العمودي للعناصر.

/* ✅ align-items — التحكم في المحاذاة العمودية */
align-items: stretch;     /* الافتراضي — العناصر بتتمدد لأطول واحد */
align-items: flex-start;  /* أعلى الحاوية */
align-items: flex-end;    /* أسفل الحاوية */
align-items: center;      /* الوسط العمودي ⭐ الأكثر استخدامًا */
align-items: baseline;    /* محاذاة أسطر النص */
        

🌟 center هو السلاح السري! قبل Flexbox، التوسيط العمودي كان بيحتاج position: absolute + transform: translateY(-50%) — كود معقد ومشكل. مع Flexbox: align-items: center وبس!

4️⃣ flex-wrap — التعامل مع المساحة الضيقة

افتراضيًا، Flexbox بيحاول يحط كل العناصر في سطر واحد — حتى لو المساحة مش كافية. flex-wrap: wrap بيخلي العناصر تنزل لسطر جديد لما المساحة تضيق.

/* ✅ flex-wrap */
flex-wrap: nowrap;   /* الافتراضي — سطر واحد (ممكن يخرج برا الشاشة) */
flex-wrap: wrap;     /* ينزل لسطر جديد لما المساحة تضيق ⭐ */
flex-wrap: wrap-reverse; /* ينزل لسطر جديد بس من تحت لفوق */
        

🎯 نصيحة ذهبية: في 99% من الحالات، استخدم flex-wrap: wrap مع gap. ده بيخلي العناصر تتكيف مع الشاشات الصغيرة تلقائيًا — مش محتاج Media Queries في كتير من الحالات!

5️⃣ gap — المسافة بين العناصر ⭐⭐⭐

قبل gap، كنا بنستخدم margin على العناصر — بس ده كان بيسبب مشاكل في الحواف. gap بيضيف مسافة بين العناصر فقط، مش في الحواف.

/* ✅ gap — المسافة بين العناصر */
.container {
    display: flex;
    gap: 20px;           /* مسافة متساوية أفقيًا وعموديًا */
    gap: 10px 20px;    /* 10px عمودي، 20px أفقي */
    /* أو بشكل منفصل: */
    row-gap: 10px;
    column-gap: 20px;
}
        

🎯 خصائص العناصر الأبناء (Item Properties)

الخصائص دي بتتحكم في عنصر واحد بشكل منفرد — مش على كل العناصر.

1️⃣ flex-grow — نسبة النمو

بتحدد إزاي العنصر يكبر ليملأ المساحة الفاضية. لو كل العناصر ليها flex-grow: 1، هيتقسموا المساحة بالتساوي.

/* ✅ flex-grow */
.item1 { flex-grow: 1; }  /* يكبر بنسبة 1 */
.item2 { flex-grow: 2; }  /* يكبر بنسبة 2 (ضعف item1) */
.item3 { flex-grow: 0; }  /* لا يكبر (الافتراضي) */

/* ✅ مثال: Sidebar + Main Content */
.sidebar { flex-grow: 0; flex-basis: 250px; }
.main    { flex-grow: 1; }  /* Main بياخد كل المساحة الباقية */
        

2️⃣ flex-shrink — نسبة الانكماش

بتحدد إزاي العنصر يصغر لما المساحة تضيق. flex-shrink: 0 بيمنع العنصر من التصغير — مفيد للأزرار أو الشعارات.

/* ✅ flex-shrink */
.logo { flex-shrink: 0; }  /* الشعار ما يصغرش أبدًا */
.nav-links { flex-shrink: 1; }  /* الروابط تصغر لو لزم */
        

3️⃣ flex-basis — الحجم الأساسي

بتحدد الحجم الابتدائي للعنصر قبل ما يكبر أو يصغر. ممكن تستخدم px، %، أو auto.

/* ✅ flex-basis */
.card {
    flex-basis: 300px;   /* يبدأ بـ 300px */
    flex-grow: 1;       /* يكبر لو فيه مساحة */
    flex-shrink: 0;     /* ما يصغرش */
}
        

4️⃣ flex — الاختصار (Shorthand)

بدل ما تكتب 3 خصائص منفصلة، استخدم flex اللي بيجمعهم: flex: grow shrink basis.

/* ✅ flex shorthand */
.item {
    /* flex: grow shrink basis */
    flex: 1 0 200px;   /* يكبر: 1، يصغر: 0، الأساس: 200px */
    
    /* ✅ قيم شائعة: */
    flex: 1;           /* = flex: 1 1 0% (يتكيف بالكامل) */
    flex: auto;       /* = flex: 1 1 auto (يتكيف مع المحتوى) */
    flex: none;       /* = flex: 0 0 auto (ثابت، لا يتكيف) */
}
        

5️⃣ align-self — محاذاة منفردة

لو عايز عنصر واحد يتحكم في محاذاته الخاصة — مش يتبع align-items بتاع الحاوية.

/* ✅ align-self */
.special-item {
    align-self: flex-end;  /* ده بس هيبقى في الأسفل */
}
        

6️⃣ order — تغيير الترتيب

بتيح لك تغيير ترتيب العناصر بدون تعديل HTML. القيمة الافتراضية هي 0 — العناصر بترتب حسب القيمة (الأقل أولًا).

/* ✅ order */
.item1 { order: 2; }  /* هيظهر تاني */
.item2 { order: 1; }  /* هيظهر أول */
.item3 { order: 3; }  /* هيظهر تالت */
        

❌ تحذير: استخدم order بحذر — بيغير الترتيب البصري فقط، مش ترتيب DOM. ده ممكن يسبب مشاكل للمكفوفين (قارئات الشاشة بتقرأ DOM مش الترتيب البصري). استخدمه للتعديلات الجمالية البسيطة بس.

💡 3 أمثلة عملية من مشاريع حقيقية

1️⃣ Navbar احترافي

/* ✅ Navbar مع Logo وروابط وزر تسجيل */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #2c3e50;
    color: white;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #4CAF50;
}

.nav-cta {
    padding: 0.5rem 1.5rem;
    background: #4CAF50;
    color: white;
    border-radius: 25px;
    text-decoration: none;
    flex-shrink: 0;  /* الزر ما يصغرش */
}
        

2️⃣ بطاقات متجاوبة (Responsive Cards)

/* ✅ بطاقات متجاوبة — 3 في الصف على الديسكتوب، 1 في الموبايل */
.cards-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.card {
    flex: 1 1 300px;   /* يكبر: 1، يصغر: 1، الأساس: 300px */
    max-width: 400px;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
}
        

🌟 ليه ده شغال؟ flex: 1 1 300px معناه: كل بطاقة تبدأ بـ 300px. لو فيه مساحة، تكبر (flex-grow: 1). لو المساحة ضيقة، تصغر (flex-shrink: 1). مع flex-wrap: wrap، البطاقات هتنزل لسطر جديد لما مفيش مساحة — وده بيخليها متجاوبة تلقائيًا!

3️⃣ Sidebar + Main Content

/* ✅ Sidebar + Main Content */
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 250px;   /* ثابت: 250px، ما يكبرش ولا يصغر */
    background: #2c3e50;
    color: white;
    padding: 2rem;
}

.main-content {
    flex: 1 1 auto;   /* ياخد كل المساحة الباقية */
    padding: 2rem;
    background: #f8f9fa;
}

/* ✅ في الموبايل: Sidebar فوق والمحتوى تحت */
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    
    .sidebar {
        flex: none;
        width: 100%;
    }
}
        

💡 أفضل الممارسات من مشاريع حقيقية

📋 قائمة التحقق قبل استخدام Flexbox:

✅ هل التخطيط أحادي البعد (صف أو عمود واحد)؟ — Flexbox مناسب
✅ هل التخطيط ثنائي البعد (صفوف + أعمدة)؟ — استخدم CSS Grid
✅ استخدمت gap بدل margin للمسافات
✶ استخدمت flex-wrap: wrap للتجاوب التلقائي
✅ استخدمت align-items: center للتوسيط العمودي
✅ استخدمت flex-shrink: 0 للعناصر اللي ما لازم تصغرش
✅ اختبرت التصميم على شاشات مختلفة

❌ أخطاء شائعة يجب تجنبها:

الخطأ ❌	الصح ✅	السبب
استخدام Flexbox لشبكة 2D	استخدام CSS Grid للشبكات	Grid أسهل وأقوى للتخطيطات ثنائية الأبعاد
نسيان flex-wrap	إضافة flex-wrap: wrap	بدون wrap، العناصر ممكن تخرج برا الشاشة
استخدام margin للمسافات	استخدام gap	gap أسهل وما بيسببش مشاكل في الحواف
الاعتماد على width: 100%	استخدام flex: 1	flex: 1 أكثر مرونة وبتتكيف مع المساحة
تغيير order بشكل مفرط	استخدام order بحذر	بيأثر على الوصولية (قارئات الشاشة)

🎯 تمرين عملي: بناء Navbar + Hero Section

طبق اللي اتعلمته في درس عملي. حاول تبني:

Navbar بـ Logo في اليمين، روابط في الوسط، وزر "ابدأ" في الشمال
Hero Section في وسط الصفحة (توسيط أفقي + عمودي)
3 بطاقات مميزات (Features) متجاوبة
Footer بـ 3 أعمدة

📖 الدرس القادم: CSS Grid — التخطيط ثنائي الأبعاد

هنتعلم كيف نبني شبكات معقدة (صفوف + أعمدة) بسهولة باستخدام CSS Grid — الأداة الأقوى للتخطيطات ثنائية الأبعاد! 📐

📦 Flexbox: التخطيط المرن اللي بيحل 90% من مشاكل CSS