Flexbox - تطوير الويب

قبل ظهور Flexbox، كان ترتيب العناصر بجانب بعضها البعض مهمة شاقة ومرهقة. كان المصممون يعانون مع float وmargin وposition، وغالباً ما ينهار التصميم بمجرد تغيير بسيط في حجم الشاشة أو إضافة عنصر جديد.

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

كل ما تحتاجه خطوتان فقط!

display: flex;

تُكتب على الأب (الحاوية)

ثم تتحكم في الأبناء بسهولة تامة عبر خصائص Flexbox

الاتجاه + المحاذاة + المسافة = ترتيب مثالي

لفهم Flexbox، عليك أن تتخيل علاقة بين طرفين (الأب والابناء):
1. الحاوية (Flex Container) - "الأب"
هو الصندوق الكبير الذي يحوي العناصر. بمجرد أن تعطيه الأمر display: flex; يتحول هذا الأب إلى "مدير" مسيطر، ويبدأ بتطبيق القواعد على أبنائه.

2. العناصر (Flex Items) - "الأبناء"
هم العناصر الموجودة بداخل الأب. يتوقفون عن العناد ويبدأون بالاستجابة لأوامر المدير (الأب) سواء بالنمو، التقلص، أو التمركز في المنتصف.

أهم خصائص ستستخدمها ٩٥٪ من الوقت

بعد أن تتعلم هذه الخصائص الثمانية، ستتمكن من بناء معظم التصاميم الشائعة بسهولة وسرعة. إليك شرحًا مبسطًا وواضحًا لكل خاصية على حدة:

1. flex-direction

المهمة: تحدد اتجاه ترتيب العناصر داخل الحاوية.

القيم الشائعة:

row ← (الافتراضي) ترتيب أفقي من اليسار إلى اليمين
row-reverse ← ترتيب أفقي من اليمين إلى اليسار
column ↑ ترتيب عمودي من الأعلى إلى الأسفل
column-reverse ↓ ترتيب عمودي من الأسفل إلى الأعلى

متى تستخدمها؟ عندما تريد تغيير التصميم من أفقي إلى عمودي، خاصة على الموبايل.

2. justify-content

المهمة: التحكم في ترتيب وتوزيع العناصر على المحور الرئيسي (الأفقي في row، والعمودي في column).

القيم الأكثر استخدامًا:

flex-start → تجمع العناصر في البداية
center → توسيط في المنتصف
flex-end → تجمع العناصر في النهاية
space-between → مسافات بين العناصر فقط
space-around → مسافة حول كل عنصر
space-evenly → توزيع متساوٍ تمامًا (غالباً الأفضل)

3. align-items

المهمة: التحكم في محاذاة العناصر على المحور العمودي (العكس من justify-content).

القيم الشائعة:

stretch → (الافتراضي) تمدد العناصر لتملأ الارتفاع كاملاً
center → توسيط عمودي
flex-start → محاذاة للأعلى
flex-end → محاذاة للأسفل
baseline → محاذاة حسب خط النص

هذه الخاصية تستخدم كثيرًا مع justify-content: center لتوسيط العناصر في المنتصف تمامًا.

4. gap

المهمة: إضافة مسافة متساوية بين العناصر بطريقة نظيفة وسهلة.

أمثلة:

gap: 20px; → مسافة 20 بكسل بين كل العناصر
gap: 16px 24px; → مسافة عمودية 16px وأفقية 24px

ميزة كبيرة: يحل محل استخدام margin بين العناصر ويمنع المسافة الزائدة في النهاية.

5. flex-wrap

المهمة: تحدد ما إذا كانت العناصر تلف إلى سطر جديد عندما تضيق المساحة.

القيم الرئيسية:

nowrap → (الافتراضي) لا تلف، العناصر قد تتقلص أو تخرج
wrap → تسمح باللف إلى سطر جديد (مهم جدًا للتصميم المتجاوب)
wrap-reverse → تلف لكن بالترتيب المعكوس

6. align-content

المهمة: التحكم في توزيع الأسطر ككل عندما يكون هناك أكثر من سطر واحد.

ملاحظة مهمة: تعمل فقط إذا كان flex-wrap: wrap مفعلاً.

7. flex-grow

المهمة: تحدد كم ينمو العنصر ليأخذ مساحة إضافية متاحة داخل الحاوية.

القيمة الافتراضية: 0 (لا ينمو)

flex-grow: 1 → يأخذ كل المساحة الإضافية
flex-grow: 3 → ينمو ثلاث مرات أكثر من العناصر الأخرى

8. flex-shrink

المهمة: تحدد كم يصغر العنصر عندما لا تكفي المساحة (الزحمة).

القيمة الافتراضية: 1 (يصغر)

flex-shrink: 0 → مهم جدًا: يمنع العنصر من التصغير مهما ضاقت الشاشة.

نصيحة ذهبية

إذا فهمت هذه الثماني خصائص جيدًا، فأنت الآن قادر على بناء:

• شريط تنقل أفقي أو عمودي
• بطاقات متساوية الحجم
• التوسيط الكامل في الصفحة
• تخطيطات متجاوبة بسيطة

ابدأ بتجربة flex-direction، justify-content، align-items وgap، ثم انتقل تدريجيًا إلى الخصائص المتقدمة.

غيّر الخصائص وشاهد الترتيب مباشرة… وتعلّم Flexbox بالعين.

الإعدادات

flex-direction

flex-wrap

justify-content

align-items

gap (px)

عدد العناصر

CSS الناتج

display: flex;

المعاينة

جرّب تغيير الاتجاه والمحاذاة وشاهد الفرق فورًا

أمثلة جاهزة (انسخ وجرب)

شريط تنقل أفقي

<nav class="flex justify-between items-center p-6 bg-indigo-700 text-white">
  <div class="text-2xl font-bold">شعار</div>
  <ul class="flex gap-10">
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">عني</a></li>
    <li><a href="#">تواصل</a></li>
  </ul>
</nav>

بطاقات متساوية

<div class="flex gap-8">
  <div class="flex-1 bg-white p-8 rounded-2xl shadow-xl">بطاقة 1</div>
  <div class="flex-1 bg-white p-8 rounded-2xl shadow-xl">بطاقة 2 محتوى أطول بكثير</div>
  <div class="flex-1 bg-white p-8 rounded-2xl shadow-xl">بطاقة 3</div>
</div>

التوسيط الشهير

<div class="flex justify-center items-center h-screen bg-gradient-to-br from-purple-600 to-pink-600">
  <div class="bg-white p-16 rounded-3xl shadow-2xl text-center">
    <h1 class="text-5xl font-bold">مرحبًا بالعالم!</h1>
  </div>
</div>

فعّل/عطّل التوسيط وشوف الفرق مباشرة (justify + align)

الإعدادات

display: flex justify-content: center align-items: center

CSS الناتج

display: flex;

المعاينة

BOX

عطّل خيارين التوسيط وشوف كيف يروح العنصر لزاوية الصندوق

تمرين: صفحة هبوط بسيطة بـ Flexbox

<nav class="flex justify-between items-center p-4 bg-indigo-700 text-white">
  <h1 class="font-bold">MY SITE</h1>
  <ul class="flex gap-6">
    <li><a href="#">الرئيسية</a></li>
    <li><a href="#">خدمات</a></li>
    <li><a href="#">تواصل</a></li>
  </ul>
</nav>

<main class="flex flex-col items-center justify-center min-h-[60vh] p-10">
  <h2 class="text-4xl font-extrabold mb-4">مرحبًا!</h2>
  <p class="text-gray-600">هذه صفحة بسيطة باستخدام Flexbox</p>
</main>

مهمتك الآن:

بدّل justify-between إلى center في الـ nav.
جرّب إضافة gap أكبر في القائمة.
خلّي القائمة على الجوال عمودية بإضافة flex-col عند الحاجة.

خلاصة Flexbox في ٤ كلمات:

display:flex + justify + align + gap

إذا فهمت هذه الأربعة… تستطيع ترتيب أي تصميم بسهولة.

الدرس القادم: CSS Grid

الشبكة السحرية للتصميمات المعقدة — مجلات ومتاجر إلكترونية في دقائق!