Flexbox من الصفر إلى الاحتراف

غير محدد مجاني

قبل ظهور Flexbox، كان ترتيب العناصر بجانب بعضها البعض يشبه محاولة موازنة الكراسي فوق بعضها؛ تستخدم float تارة و margin تارة، وفي النهاية ينهار التصميم عند أول تغيير!

اليوم، سننسى كل هذا العناء. Flexbox (أو الصندوق المرن) هو النظام الذي جعل تصميم المواقع "ذكيًا". تخيل أنك تضع أغراضك داخل حقيبة سحرية، مهما كان حجم الأغراض أو مساحة الحقيبة، هي ستعرف كيف ترتب نفسها لتبدو بشكل أنيق.

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

1

display: flex;

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

2

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

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

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

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

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

flex-direction

row ← →
column ↑ ↓

justify-content

ترتيب على المحور الرئيسي

align-items

محاذاة على المحور العمودي

gap

مسافة بين العناصر

flex-wrap

يلف عند ضيق المساحة

align-content

عند وجود أكثر من سطر

flex-grow

كبرني داخل المساحة

flex-shrink

صغّرني عند الزحمة

معلومة سريعة

justify-content يتحكم بالترتيب على المحور الرئيسي، و align-items يتحكم على المحور العمودي. تغيّر المحور الرئيسي حسب flex-direction.

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

هذا قسم: الإعدادات

هذا قسم: 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)

هذا قسم: الإعدادات

هذا قسم: 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>

مهمتك الآن:

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

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

display:flex + justify + align + gap

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

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

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

الدرس التالي العودة للسابق