كيف أوزّع عناصر Flexbox بمسافات متساوية؟

نستخدم justify-content: space-between:

.container {
  display: flex;
  justify-content: space-between;
}

العنصر الأول يلتصق ببداية الحاوية، والأخير بنهايتها، والمسافات بين العناصر متساوية.

القيم القريبة

• space-between: مسافات متساوية بين العناصر، ولا شيء عند الطرفين.
• space-around: لكل عنصر مسافة حوله، فتكون مسافة الطرف نصف المسافة بين عنصرين.
• space-evenly: كل المسافات متساوية، بما فيها الطرفان.

أو ببساطة gap

.container { display: flex; gap: 16px; }

gap يضع مسافة ثابتة بين العناصر دون توزيعها على كامل العرض.