تحتاج أشرطة الأدوات إلى ترتيب بسيط يحافظ على المسافة بين عناصر التحكم، مع السماح بالتفافها عند ضيق الشاشة. يناسب Flexbox هذه الحالات لأن العلاقة الأساسية تكون غالبًا على محور واحد.
الفكرة الأساسية
حدّد العنصر الذي يجوز له النمو والعناصر التي ينبغي أن تحتفظ بحجمها. مربع البحث يمكن أن يتمدد، بينما يحتاج زر التنفيذ إلى مساحة تكفي اسمه. استخدام gap أوضح من توزيع هوامش متعارضة على العناصر.
خطوات عملية
- اجعل حقل البحث مرنًا مع min-width مناسب يمنع دفع الزر خارج الحاوية.
- اسمح بالتفاف مجموعة الأدوات عند الحاجة بدل تصغير النص إلى درجة يصعب قراءتها.
- جرّب النصوص العربية والإنجليزية لأن طول التسمية يؤثر في العرض المطلوب.
مثال تطبيقي
في قائمة مقالات، ضع البحث في مجموعة وأزرار العرض في مجموعة أخرى. إذا ضاقت المساحة، يمكن نقل مجموعة كاملة إلى سطر جديد بدل فصل الأيقونة عن تسميتها.
خطأ شائع ينبغي تجنبه
القيمة flex-shrink ليست حلًا لكل ازدحام. تقليص مساحة عنصر تفاعلي إلى حجم شديد الصغر يضعف سهولة لمسه، حتى إن اختفى شريط التمرير.
مثال تقني مبسّط
المقتطف التالي يوضح الفكرة، ويحتاج إلى تكييف مع بنية مشروعك ومساراته والتحقق المناسب قبل استخدامه.
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; }
.search { flex: 1 1 220px; min-width: 0; }
.actions { display: flex; gap: 8px; }للتوسع في الموضوع
صور توضيحية: الغلاف من Unsplash، الصورة الداخلية من Unsplash. ترخيص الاستخدام.
