display هي واحدة من أهم خصائص CSS — فهي تتحكم في كيفية إنشاء العنصر لصندوق وكيفية ترتيب العناصر الفرعية له.
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display تحدد فعلاً شيئين: كيف يتصرف الصندوق من الخارج (block/inline) وكيف ينظم الأطفال من الداخل (flow/flex/grid). display: flex تعني "هذا الصندوق على مستوى الكتلة، وعناصره الفرعية هي عناصر flex."
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
التمييز الرئيسي: display: none يطوي التخطيط (ويخفيه من قارئات الشاشة)؛ visibility: hidden يترك فجوة حيث كان العنصر. استخدم display: none للإزالة الفعلية، وvisibility: hidden للإخفاء مع الحفاظ على التخطيط.
.container {
display: flex; /* lay children in a row/column (one dimension) */
gap: 1rem;
}
.grid {
display: grid; /* lay children in rows AND columns (two dimensions) */
grid-template-columns: repeat(3, 1fr);
}
التخطيط الحديث مبني بالكامل تقريباً على flex (1D — صفوف أو أعمدة) وgrid (2D — صفوف وأعمدة معاً).
display تحدد السلوك الكامل لتخطيط العنصر.
معرفة block مقابل inline مقابل inline-block توضح التدفق الافتراضي؛ flex/grid هي جوهر التخطيط الحديث؛ والتمييز بين none وvisibility هو تفصيل مهم يتم اختباره بشكل متكرر وله أهمية عملية.