خاصية Flex Wrap
آخر تحديث: 2026-09-13
flex-wrap خاصية Flex Wrap
تتحكم خاصية flex-wrap فيما إذا كانت عناصر flex تُجبر على سطر واحد أو تلتف إلى عدة أسطر. قيمتها الافتراضية هي nowrap، التي تبقي كل العناصر في سطر واحد حتى لو ضُغطت أو تجاوزت حافة الحاوية. أما ضبط wrap فإنه يسمح للعناصر بالتدفق إلى السطر التالي، وهو أمر مفيد جدًا في التخطيطات المتجاوبة وترتيبات البطاقات متعددة الأعمدة.
| الفئة | |
|---|---|
| القيمة الأولية | nowrap |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
flex-wrap: nowrap | wrap | wrap-reverse;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
nowrap | wrap | wrap-reverse | كلمة مفتاحية | ما إذا كانت عناصر flex تلتف |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-wrap | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لا يقوم wrap-reverse بمجرد التفاف الأسطر، بل يعكس أيضًا ترتيبها: يظهر السطر الأول في الأسفل والأخير في الأعلى، بينما يبقى ترتيب العناصر داخل كل سطر دون تغيير.
مهم： لا يؤثر align-content إلا عند ضبط flex-wrap: wrap. فهو يتحكم في التباعد والمحاذاة بين الأسطر. وفي حالة وجود سطر واحد، لا يقوم align-content بأي شيء.
❓ الأسئلة الشائعة
Qلماذا لا تزال العناصر تتجاوز الحاوية مع flex-wrap: wrap؟
Aقد لا تزال العناصر التي لها flex-basis أو width ثابتان تتجاوز الحاوية بعد الالتفاف، بسبب المساحة الإضافية التي يضيفها gap أو padding أو margin أو box-sizing. استخدم عرضًا بالنسبة المئوية أو حسابًا بـ calc() أو flex-basis: 0 مقترنًا بـ flex-grow لتتحدد أحجام العناصر بنفسها وتتشارك عرض الحاوية بالتساوي، متجنبًا التجاوز تمامًا. وتحقق أيضًا مما إذا كان أحد الأسلاف يضبط min-width أو box-sizing يمنع العناصر من الانكماش دون محتواها، لأن هذه القيود تتفاعل مع flex-basis.
Qكيف أختار بين nowrap و wrap للتخطيطات المتجاوبة؟
Aيناسب nowrap المكونات المضغوطة ذات السطر الواحد مثل أشرطة التنقل وأشرطة الأدوات. أما wrap فيناسب قوائم البطاقات والوسوم السحابية وأي شيء يجب أن يتدفق إلى أسطر جديدة كلما ضاقت الشاشة. وغالبًا ما تفضل التخطيطات المتجاوبة wrap ليتم التفاف المحتوى بشكل طبيعي، مقترنًا بـ flex-basis ثابت أو قيمة minmax للتحكم في عرض كل عنصر لتجربة أفضل على الجوال. ضع في الاعتبار أن min-width: auto قد يبقي كلمة طويلة واحدة غير قابلة للكسر، لذا أضف min-width: 0 أو overflow-wrap للسماح بكسر الأسطر.
Qما الفرق بين flex-wrap: wrap-reverse و flex-wrap: wrap؟
Aكلاهما يسمح بالالتفاف؛ والفرق يكمن في اتجاه الأسطر الملتفة. يضع wrap الأسطر الجديدة في الاتجاه الموجب للمحور الرئيسي، لذا في تخطيط صف تظهر الأسطر الجديدة في الأسفل. أما wrap-reverse فيعكس المحور المتقاطع، فتبدأ السطر الأول من الأسفل وتتكوّن الأسطر صعودًا، مما يعكس الترتيب المرئي. ونادرًا ما يكون wrap-reverse ضروريًا، وقد تكون تفاعله مع align-content مفاجئة، لذا استخدم wrap في التخطيطات العادية.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
اتجاه المحور الرئيسي
يحدد اتجاه المحور الرئيسي في تخطيط flex
الاختصار Flex Flow
اختصار لـ flex-direction و flex-wrap
