CSS Layout – The display Property

توضیح درباره خاصیت **display** در CSS به فارسی آورده شده است:

—

 خاصیت display چیست؟

خاصیت `display` در CSS تعیین می‌کند که یک عنصر چگونه نمایش داده شود و چطور با عناصر دیگر در صفحه رفتار کند. این خاصیت نوع جعبه (box type) یک عنصر را مشخص می‌کند و نحوه‌ی قرارگیری آن در ساختار صفحه را کنترل می‌کند.

—

 مقادیر رایج خاصیت `display`

1. display: block;

* عنصر کل عرض موجود را می‌گیرد.
* در خط جدید شروع می‌شود.
* مثال‌ها: `<div>`, `<p>`, `<h1>` و غیره.

2. display: inline;

* عنصر فقط به اندازه محتوایش عرض می‌گیرد.
* در همان خط جاری قرار می‌گیرد و باعث شکست خط نمی‌شود.
* مثال‌ها: `<span>`, `<a>`, `<strong>` و غیره.

3. display: inline-block;

* مثل inline است ولی می‌توان به آن عرض و ارتفاع داد.
* در همان خط قرار می‌گیرد ولی می‌تواند اندازه بگیرد.

4. display: none;

* عنصر از صفحه حذف می‌شود.
* هیچ فضایی نمی‌گیرد و دیده نمی‌شود.

5. display: flex;

* عنصر را به یک کانتینر فلکس تبدیل می‌کند.
* فرزندان داخل آن به صورت فلکس آیتم چیده می‌شوند.
* برای ساختن چیدمان‌های واکنش‌گرا بسیار کاربردی است.

6. display: grid;

* عنصر را به یک کانتینر گرید تبدیل می‌کند.
* چیدمان دو بعدی با ردیف و ستون ایجاد می‌کند.

7. display: inline-flex;

* مانند `flex` است ولی کانتینر رفتاری مشابه عناصر inline دارد.

8.display: inline-grid;

* مانند `grid` است ولی کانتینر رفتاری مشابه عناصر inline دارد.

—

چرا خاصیت `display` مهم است؟

* تعیین می‌کند عناصر چطور کنار هم قرار بگیرند یا جریان پیدا کنند.
* کنترل می‌کند که فضای اشغال شده توسط عنصر چقدر باشد.
* امکان تغییر بین مدل‌های مختلف چیدمان (بلوک، خطی، فلکس، گرید) را فراهم می‌کند.
* تغییر این خاصیت می‌تواند ساختار و ظاهر صفحه را به طور قابل توجهی تغییر دهد.

—

مثال

css
.container {
display: flex;
}

.item {
display: block;
width: 100px;
height: 100px;
}

در این مثال، `.container` به یک کانتینر فلکس تبدیل شده و عناصر `.item` داخل آن به صورت آیتم‌های فلکس در کنار هم قرار می‌گیرند.