خاصية المسافة بين العناصر gap

الصياغة

.container {
  display: flex; /* أو grid */
  gap: 16px;      /* أو: gap: 24px 12px (صفوف أعمدة) */
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .demo { display: flex; flex-wrap: wrap; gap: 12px; background: #ede9fe; padding: 12px; border-radius: 10px; }
  .demo span { background: #7c5cff; color: white; padding: 8px 16px; border-radius: 8px; }
</style>
<div class="demo">
  <span>عنصر</span><span>عنصر</span><span>عنصر</span><span>عنصر</span><span>عنصر</span>
</div>
<p>مسافات متساوية بلا هامش واحد على الأبناء — ولا حافة شاذة عند الالتفاف.</p>

أهم القيم

💡 نصائح عملية

• مسافات بين الإخوة = gap من الأب؛ مسافة عنصر عن محيطه = margin — تقسيم أدوار نظيف
• تلمع مع flex-wrap: المسافات تبقى مثالية بين الأسطر الملتفة تلقائيًا

⚠️ أخطاء شائعة

• بناء المسافات بهوامش الأبناء + خدعة last-child — النمط القديم الهش
• توقعها بين عناصر عادية بلا flex/grid على الأب — لا تعمل هناك

خصائص ذات صلة