Flexbox الأساسيات — تصميم CSS

Flexbox: الأساسيات

Flexbox نظام لترتيب العناصر في بعد واحد: صف أو عمود. أكثر استخداماته: قوائم التنقل، صفوف الأزرار، البطاقة (صورة بجانب نص)، والتوسيط.

البداية

.nav {
    display: flex;      /* .nav "حاوية flex" وأبناؤها المباشرون "عناصر flex" */
    gap: 16px;          /* مسافة بين العناصر — بلا هوامش */
}

display: flex يؤثر في الأبناء المباشرين فقط، لا الأحفاد.

المحوران

- المحور الرئيسي: اتجاه ترتيب العناصر (يحدده flex-direction).

- المحور العرضي: العمودي عليه.

| flex-direction | المحور الرئيسي |

|---|---|

| row (الافتراضي) | أفقي، يبدأ من بداية السطر: اليمين في صفحة rtl |

| row-reverse | أفقي معكوس |

| column | رأسي من الأعلى |

| column-reverse | رأسي من الأسفل |

لاحظ: في الصفحات العربية row يبدأ من اليمين تلقائياً. Flexbox "يفهم" الاتجاه.

التوزيع على المحور الرئيسي: justify-content

| القيمة | النتيجة |

|---|---|

| flex-start / start | في البداية (الافتراضي) |

| center | في الوسط |

| flex-end / end | في النهاية |

| space-between | الأول في البداية والأخير في النهاية والباقي موزع |

| space-around / space-evenly | مسافات متساوية حول/بين العناصر |

المحاذاة على المحور العرضي: align-items

| القيمة | النتيجة |

|---|---|

| stretch | تمتد لتملأ الارتفاع (الافتراضي — لهذا تتساوى ارتفاعات البطاقات) |

| center | في المنتصف عرضياً |

| flex-start / flex-end | أعلى / أسفل |

| baseline | على خط النص الأساسي |

الأنماط الأكثر شيوعاً

/* شريط تنقل: الشعار في طرف والروابط في الآخر */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* توسيط كامل */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* أيقونة بجانب نص */
.with-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

الالتفاف: flex-wrap

افتراضياً تُحشر كل العناصر في سطر واحد وتتقلص. flex-wrap: wrap يسمح لها بالنزول لسطر جديد:

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

مع الالتفاف، align-content توزع الأسطر نفسها على المحور العرضي.

gap بدل الهوامش

gap يضع مسافة بين العناصر فقط (لا قبل الأول ولا بعد الأخير)، ويعمل صحيحاً مع الالتفاف والاتجاهات. كان يُستخدم margin على كل عنصر مع حيل لإزالة هامش الأخير — لم يعد ذلك ضرورياً.

تمرين

حوّل قائمة التنقل في صفحتك إلى flex مع space-between (اسمك في جهة والروابط في الأخرى)، واجعل وسوم المهارات تلتف بـ wrap و gap. صغّر النافذة وراقب الالتفاف.

/* تفعيل Flexbox */
.flex-container {
    display: flex;
}

/* توسيط تام */
.center-everything {
    display: flex;
    justify-content: center;  /* أفقياً */
    align-items: center;      /* عمودياً */
    height: 100vh;
}

/* قائمة أفقية */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
}

/* توزيع متساوي */
.equal-columns {
    display: flex;
    gap: 20px;
}

.equal-columns > * {
    flex: 1; /* كل عنصر يأخذ نفس المساحة */
}

/* التفاف العناصر */
.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card-grid .card {
    flex: 1 1 300px; /* grow shrink basis */
    /* يكبر، يصغر، حد أدنى 300px */
}

/* عمودي */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* عكس الترتيب */
.reverse-order {
    display: flex;
    flex-direction: row-reverse;
}