ما هو Flexbox وكيف تقوم بتوسيط المحتوى باستخدامه؟

Question

Accepted Answer

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

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## المحورين

يحتوي Flexbox على **محور رئيسي** (الاتجاه الذي تتدفق فيه العناصر) و**محور متقاطع** (عمودي). تتطابق الخصائص معهما:

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## التوسيط المثالي — حالة الاستخدام الشهيرة

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

هذه الأسطر الثلاثة توسط العنصر الفرعي أفقياً وعمودياً — وهي مهمة كانت صعبة الإنجاز قبل Flexbox.

## الأنماط الشائعة

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

خيارات `justify-content` تشمل `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## لماذا يهم

Flexbox هي الأداة اليومية لأشرطة التنقل، ومجموعات الأزرار، وصفوف البطاقات، والتوسيط، وأي تخطيط "سطر من العناصر".

فهم نموذج المحور الرئيسي/المتقاطع (وأن `justify-content`/`align-items` يتبادلان المعنى عند تغيير `flex-direction`) هو النموذج الذهني الرئيسي.

استخدم Flexbox للتخطيطات أحادية البعد و Grid للتخطيطات ثنائية البعد.