flex-wrap

خاصية التفاف الصندوق المرن flex-wrap

خاصية flex-wrap تسمح لعناصر flex بالنزول لسطر جديد عند الضيق بدل الانضغاط القسري — نصف التجاوب بكلمة واحدة.

افتراضي flex صادم للمبتدئين: nowrap — الأبناء يُضغطون ويُشوهون في سطرهم الواحد مهما ضاق، ولا ينزل أحد. wrap تطلق سراحهم: من لا يتسع يلتف لسطر جديد بترتيب طبيعي.

ومع gap تكتمل الوصفة الخالدة لصفوف الشارات والبطاقات المرنة: display:flex + flex-wrap:wrap + gap — تتوزع وتلتف وتتباعد بأناقة على كل الشاشات بلا استعلام واحد (شارات المقالات وفئات المرجع بهذا الموقع). وللتحكم بعرض الأبناء الملتفين: flex: 1 1 250px تعني «ابدأ من 250px وتمدد وتقلص بمرونة».

الصياغة

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<style>
  .tags { display: flex; flex-wrap: wrap; gap: 8px; background: #ede9fe; padding: 10px; border-radius: 10px; }
  .tags span { background: #7c5cff; color: white; padding: 6px 14px; border-radius: 99px; font-size: 13px; }
</style>
<div class="tags">
  <span>HTML</span><span>CSS</span><span>JavaScript</span><span>Python</span><span>React</span><span>Docker</span><span>Git</span>
</div>
<p>ضيّق المعاينة — تلتف الشارات بأدب لأسطر جديدة.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
nowrap	الافتراضي: سطر واحد مع انضغاط — مصدر الدهشة الأولى
wrap	التفاف طبيعي لأسطر جديدة — الوصفة المرنة
wrap-reverse	التفاف بأسطر تتكدس عكسيًا — نادر

💡 نصائح عملية

احفظ الثلاثي: flex + wrap + gap = صف مرن كامل التجاوب بلا media
أعمدة بطاقات ملتفة بعرض أدنى: flex: 1 1 250px على الأبناء

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

الاستغراب من انضغاط العناصر ونسيان أن nowrap هو الافتراضي
wrap بلا gap ثم هوامش يدوية بحواف شاذة — عدنا للعصر الحجري

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs