مشكلة في تنسيق العناصر بالصفحة

عليكي استخدام flex box، ثم تعيين flex-wrap لكي يتم عرض المنتجات الباقية أسفل المنتجات الأخرى عندما لا توجد مساحة في العنصر الأب، أي يتم إزاحتها على سطر جديد.

أي تعيين التالي للعنصر الأب الذي يحتوي المنتجات:

.wrapper{
  display: flex;
flex-wrap: wrap;
gap: 10px;
}

ثم وضع المنتجات بداخله، وكل منتج يجب أن يكون بداخل div منفصل.

طيب صار ثنين بجنب بعض اقدر اخليه 3؟

مساحة (عرض) العنصر الأب صغيرة إذن، أو عرض المنتجات كبيرة على المساحة، لذا عليك تحديد مساحة الثلث لكل منتج من خلال التنسيق التالي للكلاس الخاص بالمنتجات:

flex-basis: 33.3333%

وهو إختصار للخواص التالية:

• flex-grow: 0
• flex-shrink: 0
• flex-basis: 33.3333%