تخطيطات Flexbox في العالم الحقيقي

من النظرية الى الانتاج

في الدروس السابقة، تعلمت الخصائص الفردية لـ Flexbox -- خصائص الحاوية والعناصر. الان حان الوقت لتجميعها معا وبناء تخطيطات واقعية ستواجهها في تطوير الويب المهني كل يوم. هذا الدرس قائم بالكامل على المشاريع. سنبني عشرة انماط تخطيط كاملة من الصفر، كل منها يحل مشكلة تصميم محددة يواجهها مطورو الواجهة الامامية بانتظام. بنهاية هذا الدرس، سيكون لديك مكتبة من انماط Flexbox المجربة التي يمكنك تكييفها واعادة استخدامها في اي مشروع.

كل نمط في هذا الدرس يتضمن بنية HTML و CSS الكاملة، وشرحا لماذا يتم اختيار خصائص flex محددة، وملاحظات حول السلوك المتجاوب. سنغطي اشرطة التنقل المتجاوبة وشبكات البطاقات متساوية الارتفاع وتخطيط الكأس المقدسة ونمط كائن الوسائط والتذييل اللاصق والتوسيط المثالي ومعارض الصور المتجاوبة وتخطيطات النماذج وجداول التسعير وتخطيطات لوحة القيادة. سنناقش ايضا متى تختار Flexbox بدلا من CSS Grid والعكس.

النمط 1: شريط تنقل متجاوب مع Flexbox

شريط التنقل هو احد اكثر المكونات شيوعا في اي موقع ويب. شريط التنقل الجيد يحاذي الشعار على اليسار مع روابط التنقل على اليمين، ويوسط عموديا، وينطوي الى تخطيط مناسب للهاتف على الشاشات الاصغر. Flexbox يجعل هذا مباشرا.

<header class="navbar">
    <a href="/" class="navbar-brand">
        <img src="logo.svg" alt="شعار الشركة" width="120" height="40">
    </a>
    <nav class="navbar-links">
        <a href="/products">المنتجات</a>
        <a href="/about">من نحن</a>
        <a href="/blog">المدونة</a>
        <a href="/contact">اتصل بنا</a>
    </nav>
    <div class="navbar-actions">
        <a href="/login" class="btn-login">تسجيل الدخول</a>
        <a href="/signup" class="btn-signup">انشاء حساب</a>
    </div>
</header>

.navbar {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 64px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.navbar-brand {
    flex: none;  /* الشعار لا ينمو ولا ينكمش ابدا */
}

.navbar-links {
    display: flex;
    gap: 32px;
    margin-left: 48px;  /* مسافة بين الشعار والروابط */
}

.navbar-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    white-space: nowrap;
}

.navbar-actions {
    display: flex;
    gap: 12px;
    margin-left: auto;  /* يدفع الاجراءات الى اقصى اليمين */
}

.btn-login {
    padding: 8px 16px;
    color: var(--primary);
    text-decoration: none;
}

.btn-signup {
    padding: 8px 16px;
    background: var(--primary);
    color: white;
    border-radius: 6px;
    text-decoration: none;
}

/* الجهاز اللوحي: اخفاء الاجراءات، ابقاء الروابط */
@media (max-width: 900px) {
    .navbar-links {
        gap: 20px;
        margin-left: 24px;
    }
    .navbar-actions {
        display: none;
    }
}

/* الهاتف: تكديس كل شيء عموديا */
@media (max-width: 600px) {
    .navbar {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 16px;
    }
    .navbar-brand {
        flex: 1;  /* يأخذ العرض الكامل للصف الاول */
    }
    .navbar-links {
        flex-basis: 100%;  /* يجبر على صف جديد */
        margin-left: 0;
        margin-top: 12px;
        gap: 16px;
        justify-content: space-between;
    }
}

التقنيات الرئيسية هنا هي margin-left: auto على مجموعة الاجراءات لدفعها الى اليمين، وflex: none على الشعار لابقائه جامدا، وflex-basis: 100% على الهاتف لاجبار الروابط على صف جديد عند التفاف شريط التنقل. هذا نمط يعتمد على الهاتف اولا ويتدرج بسلاسة.

النمط 2: تخطيط البطاقات متساوية الارتفاع

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

<div class="card-grid">
    <article class="card">
        <img src="image1.jpg" alt="ميزة 1" class="card-image">
        <div class="card-content">
            <h3>عنوان قصير</h3>
            <p>وصف مختصر.</p>
        </div>
        <div class="card-footer">
            <a href="#">اقرأ المزيد</a>
        </div>
    </article>
    <article class="card">
        <img src="image2.jpg" alt="ميزة 2" class="card-image">
        <div class="card-content">
            <h3>عنوان اطول بكثير يلتف</h3>
            <p>هذه البطاقة تحتوي على نص اكثر بكثير مما يجعلها
            اطول من البطاقات الاخرى طبيعيا.</p>
        </div>
        <div class="card-footer">
            <a href="#">اقرأ المزيد</a>
        </div>
    </article>
    <article class="card">
        <img src="image3.jpg" alt="ميزة 3" class="card-image">
        <div class="card-content">
            <h3>عنوان متوسط</h3>
            <p>كمية معتدلة من النص.</p>
        </div>
        <div class="card-footer">
            <a href="#">اقرأ المزيد</a>
        </div>
    </article>
</div>

.card-grid {
    display: flex;
    gap: 24px;
    padding: 24px;
}

.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    flex: 1;  /* ينمو لملء المساحة المتبقية */
    padding: 20px;
}

.card-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
}

/* متجاوب: عمودين على الجهاز اللوحي */
@media (max-width: 900px) {
    .card-grid {
        flex-wrap: wrap;
    }
    .card {
        flex: 1 1 calc(50% - 12px);
        min-width: 280px;
    }
}

/* متجاوب: عمود واحد على الهاتف */
@media (max-width: 600px) {
    .card {
        flex: 1 1 100%;
    }
}

.card-grid الخارجي هو صف flex. كل .card يستخدم flex: 1 لتقاسم المساحة بالتساوي وdisplay: flex; flex-direction: column لتكديس محتوياته عموديا. .card-content لديه flex: 1 الذي يدفع التذييل الى اسفل كل بطاقة، بغض النظر عن كمية النص التي تحتويها البطاقة. القيمة الافتراضية align-items: stretch على حاوية الشبكة تضمن ان جميع البطاقات بنفس الارتفاع.

النمط 3: تخطيط الكأس المقدسة

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

<div class="page-layout">
    <header class="page-header">
        <h1>عنوان الموقع</h1>
        <nav>الرئيسية | من نحن | اتصل بنا</nav>
    </header>
    <div class="page-body">
        <aside class="sidebar-left">
            <h3>التنقل</h3>
            <ul>
                <li><a href="#">لوحة القيادة</a></li>
                <li><a href="#">الاعدادات</a></li>
                <li><a href="#">التقارير</a></li>
            </ul>
        </aside>
        <main class="main-content">
            <h2>منطقة المحتوى الرئيسي</h2>
            <p>هذه المنطقة تتوسع لملء كل المساحة المتاحة.</p>
        </main>
        <aside class="sidebar-right">
            <h3>الادوات</h3>
            <p>المنشورات الاخيرة والاعلانات وغيرها.</p>
        </aside>
    </div>
    <footer class="page-footer">
        <p>حقوق النشر 2025. جميع الحقوق محفوظة.</p>
    </footer>
</div>

.page-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-header {
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--primary);
    color: white;
}

.page-body {
    flex: 1;           /* يملأ الارتفاع المتبقي */
    display: flex;     /* flex متداخل للاعمدة */
}

.sidebar-left {
    flex: 0 0 220px;   /* عرض ثابت بدون نمو وبدون انكماش */
    padding: 20px;
    background: #f0f2f5;
    border-right: 1px solid var(--border-light);
}

.main-content {
    flex: 1;           /* العمود الاوسط المرن */
    padding: 24px;
    min-width: 0;      /* منع الطفح */
}

.sidebar-right {
    flex: 0 0 200px;   /* الشريط الجانبي الايمن الثابت */
    padding: 20px;
    background: #f0f2f5;
    border-left: 1px solid var(--border-light);
}

.page-footer {
    flex: none;
    padding: 16px 24px;
    background: var(--text-dark);
    color: white;
    text-align: center;
}

/* متجاوب: اسقاط الشريط الجانبي الايمن اولا */
@media (max-width: 1024px) {
    .sidebar-right {
        display: none;
    }
}

/* متجاوب: تكديس كل شيء على الهاتف */
@media (max-width: 768px) {
    .page-body {
        flex-direction: column;
    }
    .sidebar-left {
        flex-basis: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
}

النمط 4: نمط كائن الوسائط

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

/* HTML */
<div class="comment">
    <img class="comment-avatar" src="user.jpg" alt="اسم المستخدم">
    <div class="comment-body">
        <div class="comment-meta">
            <strong>سارة احمد</strong>
            <time>منذ ساعتين</time>
        </div>
        <p>هذا تعليق يوضح نمط كائن الوسائط.
        النص يلتف طبيعيا ضمن المساحة المتاحة.</p>
        <div class="comment-actions">
            <button>رد</button>
            <button>اعجاب</button>
        </div>
    </div>
</div>

/* CSS */
.comment {
    display: flex;
    gap: 16px;
    padding: 16px;
    align-items: flex-start;
}

.comment-avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-meta time {
    color: var(--text-light);
    font-size: 0.875rem;
}

.comment-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* كائن وسائط متداخل (رد) */
.comment .comment {
    margin-top: 16px;
    padding-left: 0;
    border-left: 2px solid var(--border-light);
    padding-left: 16px;
}

النمط 5: التذييل اللاصق

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

/* طبقه على body او عنصر مغلف */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

/* الرأس والتذييل يبقيان بحجمهما الطبيعي */
header, footer {
    flex: none;
}

/* المحتوى الرئيسي ينمو لدفع التذييل للاسفل */
main {
    flex: 1;
}

/* هذا كل شيء. ثلاثة اسطر على العناصر الرئيسية. */

هذا النمط يعمل لان min-height: 100vh يضمن ان حاوية flex بنفس ارتفاع نافذة العرض على الاقل. flex: 1 على main يخبره بالنمو وامتصاص كل المساحة المتبقية. عندما يكون المحتوى قصيرا، يتوسع main لملء الفجوة؛ عندما يكون المحتوى طويلا، يأخذ main ارتفاعه الطبيعي وتتمرر الصفحة بشكل طبيعي.

النمط 6: التوسيط المثالي

توسيط المحتوى افقيا وعموديا كان تاريخيا واحدا من اكثر المهام احباطا في CSS. Flexbox يحله بأناقة بثلاثة اسطر فقط. اليك عدة طرق لسيناريوهات مختلفة.

/* الطريقة 1: justify-content + align-items (الاكثر شيوعا) */
.center-method-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* الطريقة 2: margin: auto على العنصر الابن (مثالية ايضا) */
.center-method-2 {
    display: flex;
    min-height: 100vh;
}
.center-method-2 .child {
    margin: auto;
}

/* الطريقة 3: اختصار place-content */
.center-method-3 {
    display: flex;
    place-content: center;
    min-height: 100vh;
}

/* توسيط نموذج تسجيل دخول على الصفحة */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--bg-light);
    padding: 20px;
}

.login-card {
    flex: none;
    width: 100%;
    max-width: 400px;
    padding: 32px;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

النمط 7: معرض صور متجاوب مع flex-wrap

معرض الصور يحتاج لعرض صور مصغرة في شبكة مرنة تلتف الى صفوف متعددة وتتكيف مع احجام شاشة مختلفة. هنا حيث يخلق flex-wrap مع flex-basis شبكة متجاوبة بدون استعلامات وسائط.

<div class="gallery">
    <figure class="gallery-item">
        <img src="photo1.jpg" alt="صورة المعرض 1">
        <figcaption>غروب الجبل</figcaption>
    </figure>
    <figure class="gallery-item">
        <img src="photo2.jpg" alt="صورة المعرض 2">
        <figcaption>امواج المحيط</figcaption>
    </figure>
    <!-- المزيد من العناصر... -->
</div>

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
}

.gallery-item {
    flex: 1 1 280px;  /* ينمو، ينكمش، حد ادنى 280 بكسل */
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.gallery-item figcaption {
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* منع عناصر الصف الاخير من التمدد كثيرا */
.gallery::after {
    content: "";
    flex: 1 1 280px;
    max-height: 0;
    overflow: hidden;
}

السحر في flex: 1 1 280px. كل عنصر له عرض ادنى 280 بكسل. عندما تكون الحاوية واسعة بما يكفي لاربعة عناصر، تحصل على اربعة اعمدة. عندما تنكمش، تلتف العناصر الى الصف التالي. flex-grow: 1 يضمن تمدد العناصر لملء كل صف. حيلة العنصر الزائف تمنع الصف الاخير من وجود عناصر تتمدد عبر العرض الكامل عندما يتبقى عنصر او عنصرين فقط.

النمط 8: تخطيط النماذج مع Flexbox

النماذج تستفيد كثيرا من Flexbox، خاصة لازواج التسمية-الادخال المضمنة ومجموعات الازرار واقسام النماذج متعددة الاعمدة. اليك تخطيط نموذج اتصال كامل مبني بـ Flexbox.

<form class="flex-form">
    <div class="form-row">
        <div class="form-group">
            <label for="first-name">الاسم الاول</label>
            <input type="text" id="first-name" name="first-name" required>
        </div>
        <div class="form-group">
            <label for="last-name">اسم العائلة</label>
            <input type="text" id="last-name" name="last-name" required>
        </div>
    </div>
    <div class="form-group full-width">
        <label for="email">البريد الالكتروني</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group full-width">
        <label for="message">الرسالة</label>
        <textarea id="message" name="message" rows="5"></textarea>
    </div>
    <div class="form-actions">
        <button type="button" class="btn-secondary">الغاء</button>
        <button type="submit" class="btn-primary">ارسال الرسالة</button>
    </div>
</form>

.flex-form {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.form-group.full-width {
    flex-basis: 100%;
}

.form-group label {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.form-group input,
.form-group textarea {
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* متجاوب: تكديس صفوف النموذج على الهاتف */
@media (max-width: 500px) {
    .form-row {
        flex-direction: column;
    }
    .form-actions {
        flex-direction: column-reverse;
    }
    .form-actions button {
        width: 100%;
    }
}

.form-row يضع الاسم الاول واسم العائلة جنبا الى جنب باستخدام display: flex. كل .form-group هو ايضا عمود flex لتكديس التسمية فوق حقل الادخال. .form-actions يستخدم justify-content: flex-end لدفع الازرار الى اليمين. على الهاتف، صفوف النموذج تتكدس عموديا والازرار تصبح بعرض كامل مع column-reverse لكي يظهر الاجراء الرئيسي اولا بصريا.

النمط 9: جدول التسعير

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

<div class="pricing-table">
    <div class="pricing-card">
        <div class="pricing-header">
            <h3>اساسي</h3>
            <div class="price">$9<span>/شهر</span></div>
        </div>
        <ul class="pricing-features">
            <li>5 مشاريع</li>
            <li>10 جيجا تخزين</li>
            <li>دعم بالبريد</li>
        </ul>
        <div class="pricing-action">
            <button>اختر الاساسي</button>
        </div>
    </div>
    <div class="pricing-card featured">
        <div class="pricing-header">
            <h3>احترافي</h3>
            <div class="price">$29<span>/شهر</span></div>
        </div>
        <ul class="pricing-features">
            <li>مشاريع غير محدودة</li>
            <li>100 جيجا تخزين</li>
            <li>دعم ذو اولوية</li>
            <li>تحليلات متقدمة</li>
        </ul>
        <div class="pricing-action">
            <button>اختر الاحترافي</button>
        </div>
    </div>
    <div class="pricing-card">
        <div class="pricing-header">
            <h3>مؤسسي</h3>
            <div class="price">$79<span>/شهر</span></div>
        </div>
        <ul class="pricing-features">
            <li>كل شيء غير محدود</li>
            <li>1 تيرا تخزين</li>
            <li>دعم هاتفي 24/7</li>
            <li>تكاملات مخصصة</li>
            <li>ضمان SLA</li>
        </ul>
        <div class="pricing-action">
            <button>اختر المؤسسي</button>
        </div>
    </div>
</div>

.pricing-table {
    display: flex;
    gap: 24px;
    padding: 40px 24px;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pricing-card.featured {
    border-color: var(--primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: scale(1.05);
}

.pricing-header {
    padding: 32px 24px;
    text-align: center;
    background: var(--bg-light);
}

.pricing-card.featured .pricing-header {
    background: var(--primary);
    color: white;
}

.price {
    font-size: 3rem;
    font-weight: 700;
    margin-top: 8px;
}

.pricing-features {
    flex: 1;          /* يدفع زر الاجراء الى الاسفل */
    list-style: none;
    padding: 24px;
    margin: 0;
}

.pricing-features li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
}

.pricing-action {
    padding: 24px;
}

.pricing-action button {
    width: 100%;
    padding: 14px;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.pricing-card.featured .pricing-action button {
    background: var(--primary);
    color: white;
}

/* متجاوب */
@media (max-width: 768px) {
    .pricing-table {
        flex-direction: column;
        max-width: 400px;
    }
    .pricing-card.featured {
        transform: none;
        order: -1;  /* البطاقة المميزة اولا على الهاتف */
    }
}

flex: 1 على .pricing-features هو التفصيل الرئيسي. يجعل قائمة الميزات تنمو لملء المساحة العمودية المتاحة، مما يدفع زر الاجراء الى اسفل كل بطاقة. هذا يبقي جميع ازرار الدعوة للعمل متحاذية على نفس الارتفاع حتى عندما تحتوي البطاقات على عدد مختلف من الميزات.

النمط 10: لوحة القيادة -- الشريط الجانبي + المحتوى

تخطيطات لوحة القيادة عادة تحتوي على شريط جانبي ثابت للتنقل ومنطقة محتوى مرنة تملأ المساحة المتبقية. يجب ان يبقى الشريط الجانبي مرئيا بينما تتمرر منطقة المحتوى بشكل مستقل.

<div class="dashboard">
    <aside class="dashboard-sidebar">
        <div class="sidebar-brand">لوحة القيادة</div>
        <nav class="sidebar-nav">
            <a href="#" class="active">نظرة عامة</a>
            <a href="#">التحليلات</a>
            <a href="#">المستخدمون</a>
            <a href="#">الاعدادات</a>
        </nav>
        <div class="sidebar-footer">
            <a href="#">تسجيل الخروج</a>
        </div>
    </aside>
    <div class="dashboard-main">
        <header class="dashboard-header">
            <h1>نظرة عامة</h1>
            <div class="user-menu">محمد احمد</div>
        </header>
        <div class="dashboard-content">
            <!-- ادوات ومحتوى لوحة القيادة هنا -->
        </div>
    </div>
</div>

.dashboard {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.dashboard-sidebar {
    flex: 0 0 260px;     /* شريط جانبي ثابت العرض */
    display: flex;
    flex-direction: column;
    background: var(--text-dark);
    color: white;
    overflow-y: auto;     /* الشريط الجانبي يتمرر بشكل مستقل */
}

.sidebar-brand {
    flex: none;
    padding: 20px 24px;
    font-size: 1.25rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-nav {
    flex: 1;              /* التنقل ينمو لملء المساحة */
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}

.sidebar-nav a {
    padding: 12px 24px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.sidebar-nav a.active {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--primary);
}

.sidebar-footer {
    flex: none;           /* التذييل يبقى في الاسفل */
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-main {
    flex: 1;              /* المحتوى يملأ المساحة المتبقية */
    display: flex;
    flex-direction: column;
    min-width: 0;         /* منع الطفح */
    overflow: hidden;
}

.dashboard-header {
    flex: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-light);
}

.dashboard-content {
    flex: 1;
    padding: 24px;
    overflow-y: auto;     /* المحتوى يتمرر بشكل مستقل */
    background: var(--bg-light);
}

/* متجاوب: شريط جانبي متراكب على الهاتف */
@media (max-width: 768px) {
    .dashboard-sidebar {
        position: fixed;
        left: -260px;       /* مخفي خارج الشاشة افتراضيا */
        top: 0;
        bottom: 0;
        z-index: 100;
        transition: left 0.3s ease;
    }
    .dashboard-sidebar.open {
        left: 0;            /* ينزلق للداخل عند التبديل */
    }
}

هذا النمط يستخدم حاويات flex متداخلة بشكل مكثف. لوحة القيادة الخارجية هي صف flex مع الشريط الجانبي ومنطقة المحتوى جنبا الى جنب. الشريط الجانبي نفسه هو عمود flex مع نمو التنقل لملء المساحة وتثبيت التذييل في الاسفل عبر flex: 1 على قسم التنقل. المنطقة الرئيسية هي ايضا عمود flex مع نمو وتمرير منطقة المحتوى بشكل مستقل. overflow: hidden على لوحة القيادة وoverflow-y: auto على منطقة المحتوى ينشئان مناطق تمرير مستقلة.

انماط الهاتف اولا

تصميم الهاتف اولا يعني البدء بتخطيط الهاتف والتحسين تدريجيا للشاشات الاكبر. مع Flexbox، تخطيط الهاتف عادة يكون عمودا واحدا (وهو التدفق الطبيعي للمستند)، وتضيف التخطيطات الافقية عند نقاط الفصل الاوسع.

/* الهاتف: عمود واحد (التدفق الافتراضي، لا حاجة لـ flex) */
.feature-section {
    padding: 20px;
}

.feature-item {
    margin-bottom: 24px;
}

/* الجهاز اللوحي وما فوق: جنبا الى جنب مع Flexbox */
@media (min-width: 600px) {
    .feature-section {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
    }
    .feature-item {
        flex: 1 1 calc(50% - 12px);
        margin-bottom: 0;
    }
}

/* سطح المكتب: ثلاثة اعمدة */
@media (min-width: 900px) {
    .feature-item {
        flex: 1 1 calc(33.333% - 16px);
    }
}

متى تختار Flexbox مقابل Grid

كل من Flexbox و CSS Grid ادوات تخطيط حديثة، لكنهما يحلان مشاكل مختلفة. فهم متى تستخدم كل واحدة سيجعلك مطورا اكثر فاعلية.

استخدم Flexbox عندما:

• لديك تخطيط احادي البعد -- العناصر تتدفق في صف واحد او عمود واحد. اشرطة التنقل ومجموعات الازرار وكائنات الوسائط وصفوف البطاقات كلها انماط احادية البعد.
• حجم المحتوى يجب ان يقود التخطيط -- عندما تريد ان تنمو العناصر وتنكمش وتلتف طبيعيا بناء على محتواها والمساحة المتاحة. Flexbox يتفوق عندما تكون احجام العناصر غير معروفة او ديناميكية.
• تحتاج محاذاة ضمن صف او عمود -- توسيط العناصر وتوزيع المساحة بينها ومحاذاة العناصر على المحور المتقاطع هي نقاط قوة Flexbox.
• تحتاج اعادة ترتيب العناصر بصريا -- خاصية order تجعل من السهل اعادة ترتيب العناصر بدون تغيير HTML.
• المكونات داخل تخطيط اكبر -- محتويات شريط التنقل ومحتويات البطاقات ومجموعات النماذج واشرطة الازرار وتخطيطات اخرى على مستوى المكونات مثالية لـ Flexbox.

استخدم CSS Grid عندما:

• لديك تخطيط ثنائي البعد -- عندما تحتاج للتحكم في كل من الصفوف والاعمدة في نفس الوقت. تخطيطات على مستوى الصفحة مع رؤوس واشرطة جانبية ومناطق محتوى في بنية شبكة.
• تريد العناصر ان تتحاذى مع شبكة محددة مسبقا -- عندما تكون بنية الشبكة اهم من حجم المحتوى. تخطيطات على طراز المجلات ولوحات القيادة وانماط فسيفساء الصور.
• تحتاج عناصر تمتد عبر صفوف او اعمدة متعددة -- Grid يجعل من السهل جدا ان يشغل عنصر صفين و3 اعمدة، وهو امر محرج مع Flexbox.
• تريد التحكم في الفجوات في كلا البعدين -- بينما يدعم Flexbox الفجوات، Grid يمنحك تحكما مستقلا في فجوات الصفوف والاعمدة في شبكة ثنائية البعد حقيقية.

استخدم كليهما معا:

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

/* تخطيط الصفحة مع Grid */
.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 64px 1fr auto;
    grid-template-areas:
        "sidebar header"
        "sidebar main"
        "sidebar footer";
    min-height: 100vh;
}

/* مكون شريط التنقل مع Flexbox */
.header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
}

/* شبكة البطاقات داخل المحتوى مع Flexbox */
.main {
    grid-area: main;
    padding: 24px;
}

.card-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.card-row .card {
    flex: 1 1 300px;
}

/* تنقل الشريط الجانبي مع Flexbox */
.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
}

.sidebar nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

ملخص انماط تخطيط Flexbox

اليك مرجع سريع للانماط التي غطيناها وخصائص flex الرئيسية التي تجعلها تعمل:

• شريط التنقل -- margin-left: auto لدفع الاجراءات يمينا، flex: none للشعار.
• البطاقات متساوية الارتفاع -- البطاقات تستخدم flex: 1 + flex-direction: column، المحتوى يستخدم flex: 1 لدفع التذييل للاسفل.
• الكأس المقدسة -- عمود flex خارجي مع flex: 1 على الجسم، صف flex داخلي مع اشرطة جانبية flex: 0 0 <width>.
• كائن الوسائط -- flex: none على الصورة، flex: 1 + min-width: 0 على جسم النص.
• التذييل اللاصق -- عمود flex على body مع min-height: 100vh، flex: 1 على main.
• التوسيط -- justify-content: center + align-items: center او margin: auto.
• معرض الصور -- flex-wrap: wrap مع flex: 1 1 <min-width>.
• النماذج -- flex: 1 على المجموعات في صف، flex-direction: column لتكديس التسمية + الادخال.
• جدول التسعير -- flex: 1 على قوائم الميزات لمحاذاة ازرار الاجراء، order: -1 للخطة المميزة على الهاتف.
• لوحة القيادة -- شريط جانبي flex: 0 0 <width>، عمود flex متداخل مع تمرير مستقل.