display

خاصية طريقة العرض display

خاصية display تحدد كيف يتصرف العنصر في التخطيط: كتلة، سطري، صندوق مرن flex، شبكة grid، أو مخفي تمامًا.

أهم خاصية تخطيط في CSS كلها — هي التي تقرر «شخصية» العنصر: block يملأ العرض ويبدأ سطرًا جديدًا، وinline يجلس داخل النص، وflex وgrid يحوّلان العنصر إلى حاوية تنظّم أبناءها بقوانين المرونة أو الشبكة، وnone يخفيه من الصفحة كأنه غير موجود.

نصف تخطيطات الويب الحديثة تبدأ بسطر واحد: display: flex أو display: grid على الحاوية — ثم تُضبط التفاصيل بخصائص التوزيع.

الصياغة

selector {
  display: flex; /* block | inline | inline-block | grid | none */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .box { padding: 8px 14px; background: #ede9fe; border-radius: 8px; margin: 4px; }
  .row { display: flex; gap: 8px; }
</style>
<p>بدون flex (كل صندوق سطر):</p>
<div><div class="box">1</div><div class="box">2</div></div>
<p>مع display: flex على الحاوية:</p>
<div class="row"><div class="box">1</div><div class="box">2</div><div class="box">3</div></div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
block	يملأ عرض أبيه ويبدأ سطرًا جديدًا (div، p افتراضيًا)
inline	يجلس داخل تدفق النص ولا يقبل width/height (span، a)
inline-block	سطري لكنه يقبل الأبعاد — الوسط الذهبي
flex / grid	يحوّل العنصر لحاوية تنظم أبناءها — أساس التخطيط الحديث
none	إخفاء كامل بلا حجز مساحة (قارن بـ visibility: hidden الذي يحجزها)

💡 نصائح عملية

احفظ الثنائية: flex لصف/عمود واحد، وgrid للصفوف والأعمدة معًا
display: none يزيل العنصر من الوصولية أيضًا — للإخفاء البصري فقط استخدم تقنيات sr-only

⚠️ أخطاء شائعة

محاولة إعطاء width لعنصر inline — لن تعمل حتى تغيّره لـ inline-block
استخدام float للتخطيط في 2026 — انقرض لصالح flex/grid

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs