1.1الحاويات والتخطيط (flexbox)
الأساسي في 30 ثانية
- الاتجاه: تصطفّ العناصر في صفّ (أفقي) أو في عمود (عمودي).
- المحاذاة: justify (المحور الرئيسي) وalign (المحور الثانوي) تُموضعان العناصر (بداية، وسط، نهاية، متباعد).
- Gap = الفراغ بين العناصر؛ wrap = تنتقل العناصر إلى السطر التالي حين يضيق المكان.
الخيط الناظم — نادية تُحاذي الشريط
تريد نادية شريطًا: على اليسار الشعار والاسم «نجارة بن علي»، وعلى اليمين زر «طلب عرض سعر»، والكل متوسّط عموديًا. بلا Flexbox، تتكدّس العناصر كيفما اتّفق. تكتشف أن الاتجاه + المحاذاة + gap تكفي لضبط كل شيء، دون سطر CSS.
تكملة المستوى 0 — نادية تنتقل من نظرية الصناديق إلى التطبيق.
1. الاتجاه والمحاذاة
تضبط حاوية Flexbox أولًا اتجاهها: صفّ (العناصر جنبًا إلى جنب، أفقيًا) أو عمود (مكدّسة عموديًا). ثم المحاذاة: justify يُدير الموضع على المحور الرئيسي (بداية، وسط، نهاية، متباعد)، وalign على المحور الثانوي. لشريط نادية: اتجاه صفّ، justify «متباعد» (الشعار يسارًا، الزر يمينًا)، align «وسط» (محاذاة عمودية).
تُضبَط هذه الإعدادات بصريًا في تبويب التخطيط للحاوية — دون برمجة. وترى النتيجة تتحرّك مباشرة على اللوحة المرئية.
2. Gap و wrap والتداخل
يُثبّت gap الفراغ المنتظم بين العناصر (أنظف من الهوامش الفردية). ويُتيح wrap للعناصر الانتقال إلى السطر التالي حين تضيق العرض — جوهري لتصير ثلاث بطاقات عمودًا على الجوّال.
أخيرًا، التداخل: حاوية «صفّ» يمكنها احتضان حاويات «عمود». تُداخِل نادية لتحصل، في الشريط، على كتلة نصّ (اسم + شعار مكدّسَين) بجانب الزر.
🔎 مثال ملموس — ضبط الشريط (حالة نادية)
حاوية الشريط: الاتجاه = صفّ
justify = متباعد (الشعار يسارًا، الزر يمينًا)
align = وسط (محاذاة عمودية)
gap = 20px؛ wrap = مُفعّل (للجوّال)
→ النتيجة: شريط نظيف، جاهز للتحوّل إلى عمود على الشاشة الصغيرة.النتيجة: محاذاة احترافية في 4 إعدادات.
الدرس: فكّر بـ الاتجاه ← المحاذاة ← gap ← wrap.
مفردات القسم
- Flexbox
- النظام الحديث الذي يُدير توزيع العناصر داخل حاوية.
مثال بسيط: تُحاذي نادية الشعار والزر من حافة إلى حافة عبر Flexbox.
ما ليس كذلك: تموضع العناصر بالبكسل بهوامش مُرتجَلة.
رد فعل: للمحاذاة داخل صندوق، اضبط Flexbox الحاوية.
- الاتجاه
- اتجاه اصطفاف العناصر: في صفّ (أفقي) أو عمود (عمودي).
مثال بسيط: شريط في صفّ؛ قائمة خدمات في عمود.
ما ليس كذلك: ظنّ أنه لا يمكن المحاذاة إلا أفقيًا.
رد فعل: جنبًا إلى جنب = صفّ؛ مكدّس = عمود.
- المحاذاة (justify / align)
- justify يُموضع على المحور الرئيسي، align على الثانوي (بداية، وسط، نهاية، متباعد).
مثال بسيط: justify «متباعد» يُبعد الشعار والزر؛ align «وسط» يُحاذيهما عموديًا.
ما ليس كذلك: إضافة هوامش عشوائية لـ «دفع» عنصر.
رد فعل: justify = على طول الاتجاه؛ align = عبره.
- Gap / Wrap
- Gap: الفراغ المنتظم بين العناصر. Wrap: يُتيح الانتقال إلى السطر حين يضيق المكان.
مثال بسيط: gap 20px بين 3 بطاقات؛ wrap لتتكدّس على الجوّال.
ما ليس كذلك: وضع هامش مختلف لكل عنصر بدل gap.
رد فعل: فراغ منتظم → gap؛ تكيّف جوّال → wrap.
- التداخل
- حاوية داخل حاوية (مثلًا صفّ يحتضن أعمدة).
مثال بسيط: في الشريط، حاوية «نصّ» (اسم + شعار) بجانب الزر.
ما ليس كذلك: تكديس حاويات بلا حاجة فعلية.
رد فعل: تداخلْ حين يجب لمجموعة عناصر أن تتصرّف معًا.
في التطبيق — بناء شريط بـ Flexbox
- أنشئ حاوية، اضبط اتجاهها على «صفّ».
- ضع شعارًا/نصًّا يسارًا وزرًا يمينًا؛ اضبط justify على «متباعد».
- اضبط align على «وسط» للمحاذاة العمودية.
- أضف gap وفعّل wrap لاستباق الجوّال.
نصّ جاهز للقول — تبرير خيار تخطيط (20 ث)
«شريطك يضع الاسم يسارًا وزر العرض يمينًا، ظاهرَين ومُحاذَيَين. على الجوّال، تنتقل العناصر تلقائيًا الواحد تحت الآخر لتبقى مقروءة. كل شيء مضبوط بنظافة، دون حلول التفافية.»
اربطي كل إعداد بفائدة ملموسة (مقروئية، جوّال).
قالب للنسخ واللصق — إعدادات حاوية
الحاوية: _______________
الاتجاه: صفّ / عمود
JUSTIFY (المحور الرئيسي): بداية / وسط / نهاية / متباعد
ALIGN (المحور الثانوي): بداية / وسط / نهاية / ممدود
GAP: ____ px
WRAP: مُفعّل / مُعطّل
تداخل؟ (حاويات فرعية): _______________شريط
صفّ، justify متباعد، align وسط: شعار من جهة، فعل من الأخرى.
قائمة خدمات
عمود، gap منتظم: كل خدمة مكدّسة، مُتنفّسة.
شبكة بطاقات
صفّ + wrap: 3 بطاقات في سطر تتكدّس على الجوّال.
توسيط كتلة
justify وسط + align وسط: كتلة متوسّطة تمامًا في حاويتها.
✓ ممارسات جيدة
- فضّل gap على الهوامش الفردية.
- فعّل wrap لاستباق الجوّال.
- تداخلْ فقط حين يجب لمجموعة أن تتحرّك معًا.
✗ أخطاء شائعة
- دفع العناصر بهوامش بدل justify/align.
- نسيان wrap وكسر العرض على الجوّال.
- الإفراط في تداخل الحاويات.
النقاط الأساسية
- الاتجاه: صفّ أو عمود.
- justify (المحور الرئيسي) و align (المحور الثانوي).
- gap = فراغ منتظم؛ wrap = الانتقال إلى السطر.
- كل شيء يُضبَط بصريًا، دون CSS.
تحدّي 48 ساعة — طبّق غدًا
ابنِ شريطًا (شعار + زر) مُحاذى باتجاه صفّ، justify «متباعد»، align «وسط» و gap. فعّل wrap وتحقّق من العرض على الجوّال في المعاينة. 20 دقيقة.
- أضبط اتجاه و justify و align لحاوية.
- أستخدم gap و wrap بحكمة.
- أتداخل حين يتطلّب التخطيط ذلك.
أسئلة شائعة
هل يجب أن أعرف CSS لاستخدام Flexbox في Elementor؟
لا: كل شيء يُضبَط بصريًا (الاتجاه، justify/align، gap، wrap) في تبويب التخطيط. معرفة المصطلحات تساعد، لكن لا شيفرة مطلوبة.
ما الفرق بين justify و align؟
justify يعمل على المحور الرئيسي (اتجاه الاتجاه)، align على المحور الثانوي (العمودي). في صفّ: justify = أفقي، align = عمودي.
ما فائدة wrap؟
السماح للعناصر بالانتقال إلى السطر حين تضيق العرض — لا غنى عنه لتتكدّس صفّ بطاقات بنظافة على الجوّال.
تريد نادية الشعار يسارًا وزر «العرض» يمينًا، مُحاذَيَين عموديًا. أي إعدادات للحاوية؟