خاصية display في لغة CSS هي أداة قوية جداً تُستخدم للتحكم في كيفية عرض العناصر على صفحة الويب. تُحدد هذه الخاصية نوع صندوق العرض المستخدم للعنصر، مما يؤثر بشكل كبير على تخطيط الصفحة.

القيم الأساسية لخاصية display:

none: لإخفاء العنصر تماماً. لا يشغل العنصر أي مساحة في الصفحة.

block: يجعل العنصر يأخذ عرض الصفحة بالكامل ويبدأ على سطر جديد. العناصر مثل <div> و <p> تأخذ هذه القيمة افتراضياً.
inline: يجعل العنصر يأخذ فقط المساحة التي يحتاجها ويستمر في نفس السطر مع العناصر الأخرى. العناصر مثل <span> و <a> تأخذ هذه القيمة افتراضياً. لا يمكنك تحديد عرض أو ارتفاع للعناصر inline.
inline-block: يشبه inline من حيث أنه يسمح للعناصر بالبقاء في نفس السطر، ولكنه يسمح أيضاً بتحديد عرض وارتفاع للعنصر، إضافة إلى الهوامش الداخلية والخارجية.
flex: يُفعّل وضع التخطيط المرن (Flexbox)، وهو نظام تخطيط قوي وفعّال لتصميم واجهات المستخدم المعقدة. يسمح Flexbox بالتحكم في محاذاة وتوزيع وترتيب العناصر داخل حاوية.
grid: يُفعّل نظام التخطيط الشبكي (Grid)، وهو نظام تخطيط ثنائي الأبعاد يُستخدم لإنشاء تخطيطات معقدة وقوية. يسمح Grid بتقسيم الصفحة إلى صفوف وأعمدة والتحكم في موضع العناصر داخل هذه الشبكة.
  • table، table-row، table-cell: تُستخدم لمحاكاة سلوك عناصر الجداول في HTML. نادراً ما تُستخدم هذه القيم في التخطيطات الحديثة بسبب مرونة Flexbox و Grid.


    • متى تستخدم كل قيمة؟

    none: لإخفاء عناصر لا تريد عرضها مؤقتاً أو بشكل مشروط (باستخدام JavaScript مثلاً).
    block: للعناصر التي تريدها أن تأخذ عرض الصفحة بالكامل وتبدأ على سطر جديد، مثل الفقرات والعناوين.
    inline: للعناصر التي تريدها أن تبقى في نفس السطر مع العناصر الأخرى، مثل الروابط والنصوص الصغيرة.
    inline-block: عندما تريد عنصراً أن يبقى في نفس السطر مع إمكانية التحكم في عرضه وارتفاعه، مثل الأزرار الصغيرة أو الصور داخل النصوص.
    flex: لتصميم تخطيطات أحادية البُعد أو ثنائية البُعد بسيطة أو معقدة، مع التركيز على المحاذاة والتوزيع.
    grid: لتصميم تخطيطات ثنائية البُعد معقدة، مع التركيز على تقسيم الصفحة إلى صفوف وأعمدة.
    هذا المثال يوضح الفرق بين الأنواع الثلاثة block و inline و inline-block.

    فهم خاصية display أمر أساسي لتصميم صفحات ويب متجاوبة ومرنة. باستخدام القيم المختلفة لهذه الخاصية، يمكنك التحكم بشكل كامل في تخطيط العناصر على صفحتك.