دليل أدوات Flexbox للتخطيط

نُشر في 2026-10-08 · آخر تحديث 2026-10-08

يعد Flexbox من أكثر الطرق العملية لترتيب عناصر الواجهة داخل صفوف أو أعمدة مع التحكم في المحاذاة والمسافات والالتفاف والاستجابة. يوضح هذا الدليل كيف تستخدم أدوات Flexbox بفهم واضح بدل الاعتماد على التجربة العشوائية.

ابدأ بفهم الحاوية المرنة

يبدأ Flexbox من الحاوية. عندما تحول عنصرًا إلى حاوية مرنة تصبح العناصر المباشرة داخله عناصر Flex وتتبع قواعد الحاوية. قبل تعديل كل عنصر منفردًا، قرر هل يجب أن تسير المجموعة أفقيًا أم رأسيًا، وما الهدف الأساسي من ترتيبها. شريط تنقل، وصف أزرار، وقسم نموذج، وتذييل بطاقة، وشريط أدوات لوحة تحكم يمكن أن تستخدم Flexbox، لكن لكل منها هدف محاذاة مختلف.

فكر دائمًا في المحور الرئيسي والمحور العرضي. في اتجاه الصف يكون المحور الرئيسي أفقيًا والعرضي رأسيًا، بينما يتبادلان الأدوار في اتجاه العمود. هذا يفسر لماذا تؤثر خصائص مثل justify-content وalign-items في اتجاهات مختلفة. إذا بدا التخطيط غير منطقي، راجع اتجاه flex أولًا ثم حدد المحور الذي تريد التحكم فيه.

• اختر الصف أو العمود عن قصد.
• حدد المحور الرئيسي والعرضي.
• عدل قواعد الحاوية قبل معالجة كل عنصر منفردًا.

استخدم المحاذاة بهدف واضح

تحدث كثير من مشكلات Flexbox عندما يتم تغيير خصائص المحاذاة دون معرفة ما الذي تتحكم فيه. خاصية justify-content توزع العناصر على المحور الرئيسي، بينما align-items تتحكم في المحاذاة عبر المحور العرضي. في رأس أفقي يمكن استخدام justify-content للفصل بين الشعار والأزرار، بينما تساعد align-items على توسيطهما رأسيًا. أما في بطاقة رأسية فتتغير الاتجاهات لأن اتجاه flex تغير.

استخدم المحاذاة للتعبير عن هيكل الواجهة، لا لتعويض مشكلة مسافات غير مرتبطة. إذا كان عنصر واحد يحتاج إلى محاذاة مختلفة عن بقية العناصر، يمكن استخدام خاصية على مستوى العنصر مثل align-self عند الحاجة بدل تغيير الحاوية كلها. كلما بقي منطق المحاذاة بسيطًا أصبح السلوك المتجاوب أسهل في الفهم وأقل عرضة للكسر.

• استخدم justify-content على المحور الرئيسي.
• استخدم align-items على المحور العرضي.
• استخدم الاستثناءات على مستوى العنصر بحذر.

استخدم gap للمسافات المنتظمة

خاصية gap غالبًا هي أنظف طريقة لإنشاء مسافات ثابتة بين عناصر Flex. فهي تجعل المسافة مسؤولية الحاوية بدل إضافة هوامش مختلفة لكل عنصر. هذا مفيد في مجموعات الأزرار، والبطاقات، والقوائم، وعناصر النماذج، وأدوات لوحات التحكم التي تحتاج إلى نفس المسافة بين كل عنصر وآخر.

الهوامش ما زالت مفيدة في بعض الحالات، لكنها لا يجب أن تكون الحل الافتراضي لكل مسافة. التحكم في المسافة من خلال الحاوية يجعل إعادة الترتيب والالتفاف والتوسع أسهل، ويقلل ظهور مسافة زائدة في بداية الصف أو نهايته. وعند العمل مع Infera Agent، صف العلاقة المطلوبة بين العناصر مثل مسافة متساوية بين الأزرار أو شريط أدوات مدمج بدل طلب قيم هوامش عشوائية بلا سياق.

• فضل gap للمسافات المنتظمة.
• استخدم الهوامش للعلاقات الاستثنائية.
• اجعل منطق المسافات في الحاوية قدر الإمكان.

صمم الالتفاف والاستجابة بوعي

الصف الذي يبدو ممتازًا على شاشة واسعة قد يفشل على الشاشات الصغيرة إذا أجبرت العناصر على البقاء في سطر واحد. تسمح flex-wrap للعناصر بالانتقال إلى أسطر إضافية عندما تقل المساحة. يفيد ذلك في الوسوم، ومجموعات الأزرار، والفلاتر، والبطاقات، وأي مجموعة يجب أن تظل مقروءة دون تمرير أفقي مزعج.

اختبر الالتفاف بنصوص حقيقية وليست قصيرة فقط. النصوص المترجمة والأسماء الطويلة والقيم الديناميكية تكشف مشكلات لا تظهر مع النص التجريبي. اختبر الشاشات الضيقة، وتكبير الخط، واللغات المختلفة. وإذا أدى الالتفاف إلى ترتيب غير منطقي، فكر في إعادة تجميع العناصر أو التحول إلى عمود عند نقطة استجابة معينة. الهدف ليس مجرد احتواء العناصر، بل الحفاظ على ترتيب قراءة وتفاعل واضح.

• اختبر الالتفاف بنصوص واقعية.
• راجع الشاشات الضيقة والترجمات.
• حافظ على ترتيب قراءة منطقي.

استخدم النمو والانكماش بحذر

خصائص flex-grow وflex-shrink وflex-basis تتحكم في كيفية تقاسم العناصر للمساحة المتاحة. هذه الأدوات قوية لكنها قد تعطي نتائج غير متوقعة إذا استخدمت بلا قاعدة واضحة. استخدم النمو عندما يجب أن يأخذ عنصر واحد المساحة المتبقية، مثل حقل بحث بين أزرار ثابتة. أما الانكماش فيحتاج إلى حذر عندما يجب الحفاظ على وضوح النص أو الحد الأدنى لحجم عناصر التحكم.

لا تعط كل عنصر قيم flex عشوائية. أنشئ أنماطًا بسيطة يمكن فهمها، مثل أزرار تبقى بحجمها الطبيعي ومساحة محتوى مركزية تتمدد، أو شريط جانبي ثابت مع لوحة رئيسية مرنة. ويمكن دمج قواعد flex مع min-width وmax-width عندما يحتاج المحتوى إلى حماية. هذا ينتج تخطيطًا أكثر ثباتًا من الاعتماد على نسب flex وحدها.

• استخدم النمو للمساحة المتبقية.
• احم العناصر المهمة من الانكماش الزائد.
• ادمج Flexbox مع حدود أحجام منطقية.

ابن أنماط تخطيط قابلة لإعادة الاستخدام

تظهر قوة Flexbox عندما تحول التخطيطات الناجحة إلى أنماط تتكرر في المشروع. من أمثلتها الأعمدة المركزية، والرؤوس المنقسمة، وصفوف الأزرار، وأشرطة الأدوات المتجاوبة، وتذييلات البطاقات، وأزواج العنوان والقيمة، والألواح الثنائية. حدد الاتجاه والمحاذاة والمسافة والالتفاف والعناصر المرنة لكل نمط حتى يعاد استخدامه بدل بنائه من الصفر.

عند مراجعة النمط اختبر حالات الفراغ، والنص الطويل، وإضافة أزرار جديدة، وإخفاء عناصر، وتغيير اللغة. النمط الجيد يجب أن يتحمل تغير المحتوى الطبيعي دون تعديلات يدوية دقيقة في كل مرة. وإذا استخدمت Infera Agent لبناء أو تعديل الواجهة، صف سلوك النمط على الشاشات المختلفة ثم تحقق منه في المتصفح بدل الحكم من أول لقطة فقط.

• أنشئ أنماط Flex متكررة.
• اختبر المحتوى الديناميكي والحالات الطرفية.
• تحقق من السلوك على أكثر من عرض شاشة.

أسئلة

ابدأ مجانًا القوالب