افتراضيًا تحاول عناصر Flexbox البقاء في سطر واحد مهما ضاقت المساحة، فتنضغط أو تخرج من الحاوية. الحل:

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

مع flex-wrap: wrap تنتقل العناصر التي لا تتسع إلى السطر التالي تلقائيًا، وهذا مهم جدًا للجوال.

مع عرض أدنى للعنصر

.item {
  flex: 1 1 200px;  /* grow, shrink, start at 200px */
}

هكذا يأخذ كل عنصر 200px على الأقل، ويتوزع ما يتبقى من مساحة بينها.

القيمة الافتراضية هي nowrap، وهي سبب المشكلة. أما justify-content وalign-items فللمحاذاة فقط.