تابز مدیا | آموزش قدم به قدم برنامه نویسی

align-content

📌 خاصیت align-content زمانی استفاده میشه که Grid یا Flexbox چند ردیف (multiple rows) داشته باشه.
این ویژگی تعیین می‌کنه کل ردیف‌ها (نه آیتم‌های داخل ردیف) به صورت عمودی درون container چطور چیده بشن.

1) کلاس‌های Tailwind برای align-content

کلاس	مقدار CSS	توضیح
`content-normal`	`align-content: normal;`	رفتار پیش‌فرض مرورگر
`content-center`	`align-content: center;`	همه ردیف‌ها در مرکز container قرار می‌گیرن
`content-start`	`align-content: flex-start;`	همه ردیف‌ها به بالای container می‌چسبن
`content-end`	`align-content: flex-end;`	همه ردیف‌ها پایین container جمع میشن
`content-between`	`align-content: space-between;`	ردیف اول بالا، ردیف آخر پایین، بقیه مساوی بینشون تقسیم میشه
`content-around`	`align-content: space-around;`	فاصله مساوی دور تا دور ردیف‌ها
`content-evenly`	`align-content: space-evenly;`	فاصله برابر بین همه ردیف‌ها

2) مثال‌ها

🔹 content-center


<div class="grid grid-cols-3 gap-4 h-64 content-center bg-gray-200">
  <div class="bg-coral">1</div>
  <div class="bg-coral">2</div>
  <div class="bg-coral">3</div>
  <div class="bg-coral">4</div>
  <div class="bg-coral">5</div>
  <div class="bg-coral">6</div>
</div>

👉 تمام ردیف‌های Grid وسط ارتفاع container قرار می‌گیرن.

🔹 content-between


<div class="grid grid-cols-2 gap-4 h-64 content-between bg-gray-200">
  <div class="bg-coral">A</div>
  <div class="bg-coral">B</div>
  <div class="bg-coral">C</div>
  <div class="bg-coral">D</div>
</div>

👉 ردیف اول چسبیده به بالا، ردیف آخر پایین، بقیه وسط پخش میشن.

🔹 content-around


<div class="grid grid-cols-2 gap-4 h-64 content-around bg-gray-200">
  <div class="bg-coral">X</div>
  <div class="bg-coral">Y</div>
  <div class="bg-coral">Z</div>
  <div class="bg-coral">W</div>
</div>

👉 بین هر ردیف و اطرافش فاصله مساوی وجود داره.

✅ نکته مهم:

align-content روی ردیف‌های Grid یا Flex اثر میذاره (نه تک آیتم).
برای تراز کردن خود آیتم‌ها باید از align-items یا align-self استفاده کنیم.