ما الذي تتحكم فيه خاصية display؟

Question

Accepted Answer

`display` هي واحدة من أهم خصائص CSS — فهي تتحكم في **كيفية إنشاء العنصر لصندوق** وكيفية ترتيب العناصر الفرعية له.

```css
.a { display: block; }        /* full width, starts new line (div, p, section) */
.b { display: inline; }       /* flows in text, ignores width/height (span, a) */
.c { display: inline-block; } /* flows inline BUT respects width/height/margins */
.d { display: none; }         /* removed entirely — no space, not rendered */
.e { display: flex; }         /* flex container — 1D layout for children */
.f { display: grid; }         /* grid container — 2D layout for children */
```

## الخارج مقابل الداخل

`display` تحدد فعلاً شيئين: كيف يتصرف الصندوق **من الخارج** (block/inline) وكيف ينظم **الأطفال** من الداخل (flow/flex/grid). `display: flex` تعني "هذا الصندوق على مستوى الكتلة، وعناصره الفرعية هي عناصر flex."

## display: none مقابل visibility: hidden

```css
.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` للإخفاء مع الحفاظ على التخطيط.

## محركات التخطيط الأساسية

```css
.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` هو تفصيل مهم يتم اختباره بشكل متكرر وله أهمية عملية.