آموزش جامع ویژگی display در CSS

🎯 اهداف یادگیری

• آشنایی با مقادیر مختلف ویژگی display
• درک تفاوت بین block، inline و inline-block
• کاربرد flexbox و grid در چیدمان عناصر
• تکنیک‌های پیشرفته نمایش عناصر

📌 مقدمه‌ای بر ویژگی display

ویژگی display یکی از مهم‌ترین ویژگی‌های CSS است که نحوه نمایش و چیدمان عناصر را کنترل می‌کند:

.element {
  display: block; /* مقدار پیش‌فرض برای div */
}

مقادیر اصلی display:

• block: عنصر به صورت بلوکی نمایش داده می‌شود و عرض کامل را می‌گیرد
• inline: عنصر درون خط متن نمایش داده می‌شود و فقط به اندازه محتوا فضا می‌گیرد
• inline-block: ترکیبی از هر دو - درون خط نمایش داده می‌شود اما می‌تواند ابعاد داشته باشد
• none: عنصر کاملاً از صفحه حذف می‌شود

📌 تفاوت block و inline

.block-example {
  display: block;
  width: 200px;
  height: 100px;
  background-color: lightblue;
}
.inline-example {
  display: inline;
  background-color: lightcoral;
  /* width و height در اینجا کار نمی‌کنند */
}

مقایسه ویژگی‌ها:

📌 display: inline-block

این مقدار ترکیبی از ویژگی‌های block و inline را ارائه می‌دهد:

.nav-item {
  display: inline-block;
  width: 100px;
  height: 40px;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 40px;
}

مزایای inline-block:

• چیدمان افقی: امکان چیدمان عناصر در یک خط
• کنترل ابعاد: امکان تنظیم عرض و ارتفاع
• حاشیه و padding: کارکرد کامل مانند عناصر block
• تراز عمودی: امکان استفاده از vertical-align

📌 Flexbox - چیدمان انعطاف‌پذیر

Flexbox یک مدل چیدمان قدرتمند برای توزیع فضای بین عناصر است:

.flex-container {
  display: flex;
  flex-direction: row; /* یا column */
  justify-content: space-between; /* توزیع فضای افقی */
  align-items: center; /* تراز عمودی */
}

ویژگی‌های کلیدی Flexbox:

• flex-direction: جهت چیدمان (row, column, row-reverse, column-reverse)
• justify-content: توزیع فضای اصلی (flex-start, center, space-between, space-around)
• align-items: تراز عمودی (stretch, flex-start, center, baseline)
• flex-wrap: کنترل رفتن به خط جدید (nowrap, wrap, wrap-reverse)

📌 CSS Grid - چیدمان شبکه‌ای

Grid یک سیستم چیدمان دو بعدی برای طراحی رابط‌های کاربری پیچیده است:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* دو ستون با نسبت 1:2 */
  grid-template-rows: 100px auto;
  gap: 10px; /* فاصله بین سلول‌ها */
}

ویژگی‌های کلیدی Grid:

• grid-template-columns/rows: تعریف ساختار ستون‌ها و ردیف‌ها
• grid-column/grid-row: موقعیت‌دهی عناصر در شبکه
• grid-area: نامگذاری و موقعیت‌دهی پیشرفته
• gap: فاصله بین سلول‌های شبکه

📌 مقادیر خاص display

برخی مقادیر کمتر شناخته شده اما کاربردی برای ویژگی display:

.table-like {
  display: table; /* شبیه جدول بدون تگ table */
}
.hidden-element {
  display: none; /* مخفی کردن کامل عنصر */
}
.contents-example {
  display: contents; /* حذف جعبه بیرونی */
}

کاربردهای خاص:

• table: برای چیدمان‌های جدولی بدون استفاده از تگ‌های table
• none: مخفی کردن کامل عنصر از صفحه و جریان نمایش
• contents: حذف جعبه بیرونی و نمایش فقط محتوا
• list-item: نمایش عنصر به صورت آیتم لیست (مانند li)

📌 تمرین عملی

با استفاده از ویژگی display، المان‌های زیر را به صورت عمودی و افقی وسط‌چین کنید:

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

راهنمای تمرین:

1. از display: flex برای container استفاده کنید
2. عناصر box را با عرض و ارتفاع 100px ایجاد کنید
3. از justify-content و align-items برای وسط‌چین استفاده کنید
4. راه‌حل‌های مختلف با grid و inline-block را نیز امتحان کنید

📌 تکنیک‌های پیشرفته در استفاده از ویژگی display در CSS

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

1. تفاوت بین block، inline و inline-block
   
   • display: block: عنصر کل عرض موجود را می‌گیرد و در خط جدید شروع می‌شود (مثل
     ،

     )

     css

     .box {
       display: block;
       width: 200px;
       height: 100px;
       background: blue;
     }

   • display: inline: عنصر فقط به اندازه محتوایش فضا می‌گیرد و در کنار عناصر دیگر قرار می‌گیرد (مثل ، )
     css

     .link {
       display: inline;
       padding: 5px;
       color: red;
     }

2. استفاده از display: none در مقابل visibility: hidden
   
   • display: none: عنصر کاملاً از صفحه حذف می‌شود و فضایی اشغال نمی‌کند
     css

     .hidden-element {
       display: none;
     }

   • visibility: hidden: عنصر نامرئی می‌شود اما فضای آن در صفحه باقی می‌ماند
     css

     .invisible-element {
       visibility: hidden;
     }

3. چیدمان‌های مدرن با flex و grid
   

   Flexbox (display: flex)

   برای چیدمان یک‌بعدی (ردیف یا ستون) مناسب است:

   css

   .container {
     display: flex;
     justify-content: space-between; /* توزیع فضای بین آیتم‌ها */
     align-items: center; /* تراز عمودی */
   }
   .item {
     flex: 1; /* توزیع فضای برابر بین آیتم‌ها */
   }

   CSS Grid (display: grid)

   برای چیدمان دو بعدی (هم ردیف و هم ستون) مناسب است:

   css

   .container {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr; /* سه ستون با نسبت‌های مشخص */
     grid-gap: 10px; /* فاصله بین سلول‌ها */
   }
   .item {
     grid-column: span 2; /* آیتم دو ستون را اشغال کند */
   }

4. تکنیک display: table برای چیدمان‌های جدولی
   وقتی نیاز به نمایش داده به صورت جدولی دارید اما از تگ <table> استفاده نمی‌کنید:
   css

   .table {
     display: table;
     width: 100%;
   }
   .table-row {
     display: table-row;
   }
   .table-cell {
     display: table-cell;
     padding: 10px;
     border: 1px solid #ddd;
   }

5. استفاده از display: contents برای حذف عنصر والد
   این مقدار باعث می‌شود عنصر والد از ساختار چیدمان حذف شود و فرزندان آن مستقیماً در سطح بالاتر قرار گیرند:
   css

   .parent {
     display: contents; /* این عنصر در چیدمان تاثیری ندارد */
   }
   .child {
     /* این عنصر مستقیماً در چیدمان والد parent قرار می‌گیرد */
   }