انواع display در CSS و کاربردهای آن

ویژگی display در CSS تعیین می‌کند که عناصر چگونه در صفحه نمایش داده شوند. در ادامه، انواع display را به‌صورت ساده و کاربردی توضیح می‌دهم:

1. نمایش بلوکی (block)

🔹 عنصر را به‌صورت یک بلوک کامل نمایش می‌دهد.
🔹 کل عرض را اشغال می‌کند و از خط جدید شروع می‌شود.

✅ مثال:

div {
  display: block;
}

📌 عناصر پیش‌فرض بلوکی: <div>, <p>, <h1> تا <h6>, <section>, <article>, <footer>

2. نمایش درون‌خطی (inline)

🔹 عنصر درون خط باقی می‌ماند و فقط به اندازه محتوایش فضا می‌گیرد.
🔹 نمی‌توان به آن عرض (width) و ارتفاع (height) داد.

✅ مثال:

span {
  display: inline;
}

📌 عناصر پیش‌فرض درون‌خطی: <span>, <a>, <strong>, <em>

3. نمایش درون‌خطی بلوکی (inline-block)

🔹 مانند inline است، اما می‌توان عرض و ارتفاع را تغییر داد.

✅ مثال:

button {
  display: inline-block;
  width: 100px;
  height: 40px;
}

📌 کاربرد: دکمه‌ها، منوها، کارت‌های کوچک

4. نمایش نامرئی (none)

🔹 عنصر را به‌طور کامل از صفحه حذف می‌کند (فضایی هم اشغال نمی‌کند).

✅ مثال:

.hidden {
  display: none;
}

📌 کاربرد: مخفی کردن منوها، نمایش مشروط عناصر

5. نمایش فلکس (flex)

🔹 یک مدل چیدمان قوی برای کنترل موقعیت و اندازه فرزندان.

✅ مثال:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

📌 کاربرد: ساختارهای پیچیده مانند هدر، فوتر، لیست‌های افقی

6. نمایش گرید (grid)

🔹 چیدمان مبتنی بر شبکه برای کنترل بهتر جایگیری عناصر.

✅ مثال:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

📌 کاربرد: طراحی صفحه‌بندی‌های حرفه‌ای

7. نمایش محتوا (contents)

🔹 خود عنصر حذف می‌شود اما فرزندان آن باقی می‌مانند.

✅ مثال:

.wrapper {
  display: contents;
}

📌 کاربرد: وقتی می‌خواهید بدون تغییر ساختار HTML، عنصری را حذف کنید.

8. نمایش لیست (list-item)

🔹 عنصر را به شکل آیتم لیست (<li>) با نشانه‌گذاری نمایش می‌دهد.

✅ مثال:

.custom-item {
  display: list-item;
}

📌 کاربرد: سفارشی‌سازی لیست‌های نامرتب و مرتب

جمع‌بندی سریع

💡 اگر تازه‌کار هستی، بیشتر از block، inline-block، flex و grid استفاده کن.