55. خاصية حاوية Flex: flex-wrap
بشكل افتراضي، تم تصميم Flexbox للحفاظ على جميع العناصر في سطر واحد، حتى لو فاضت عن الحاوية. تسمح flex-wrap للعناصر بالالتفاف إلى أسطر متعددة عندما لا تتوفر مساحة كافية.
القيم المتاحة
| القيمة | الوصف |
|---|---|
nowrap (افتراضي) | يتم إجبار جميع عناصر flex على سطر واحد، مع تجاهل عرضها الطبيعي إذا لزم الأمر (تنكمش). |
wrap | ستلتف العناصر إلى سطر جديد إذا لزم الأمر، من الأعلى إلى الأسفل. |
wrap-reverse | ستلتف العناصر إلى سطر جديد، من الأسفل إلى الأعلى. |
مثال: إنشاء شبكة متجاوبة مع الالتفاف
عند إنشاء تخطيطات البطاقات أو المعارض، تحتاج إلى التفاف العناصر عندما تصغر الشاشة.
css .card-gallery { display: flex; flex-wrap: wrap; /* يسمح للعناصر بالتدفق إلى السطر التالي */ max-width: 900px; }
.card { /* تعيين عرض قاعدي مرن، مع ضمان حد أدنى للحجم */ width: 300px; min-width: 250px; height: 150px; margin: 10px; }
مع تقلص منفذ العرض، فإن البطاقات التي لا تتسع في السطر الأول ستسقط تلقائياً إلى السطر الثاني.