Flexbox: الصندوق الذي وزع المساحة

الخلاصة

وصفت أول مسودة علنية لـFlexible Box Layout نشرها W3C في 23 يوليو 2009 أبناء الصندوق وهم يتمددون في المساحة الزائدة أو ينكمشون عند نقصها، مستعملة خصائص مبكرة مثل box-flex.
استخدم النص المرشح في 18 سبتمبر 2012 display: flex وعوامل النمو والانكماش وحجم البداية. ونبه نص 19 نوفمبر 2018 المرشح إلى أن تبديل ترتيب العرض لا يبدل ترتيب المستند أو القراءة أو التنقل بلوحة المفاتيح.

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

بدأت أول مسودة عمل علنية لـFlexible Box Layout نشرها W3C في 23 يوليو 2009 من تصميم الواجهات. يرتب الصندوق أبناءه أفقياً أو عمودياً، ويمكن للعناصر المرنة أن تكبر إذا بقي فراغ أو تصغر إذا ضاق المكان. ذكرت المسودة أن نموذجها يستند إلى صناديق واجهات XUL. كانت مفرداتها يومئذ display: box وbox-orient وbox-flex وbox-lines. هذه أسماء من مرحلة أولى، لا وصفة جاهزة للصقها اليوم في ملف تنسيق حديث.

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

أعادت توصية W3C المرشحة في 18 سبتمبر 2012 ترتيب الاتفاق. يصنع display: flex وinline-flex حاوية مرنة. تسير العناصر على محور رئيسي، ويعبره محور آخر. يجمع الاختصار flex حجم الأساس وعامل النمو وعامل الانكماش. كم يأخذ العنصر أولاً؟ كم يستفيد من الفائض؟ وكم يتنازل حين تضيق الغرفة؟ يمكن لحقل البحث أن يلتقط الفراغ، بينما يحتفظ زر القائمة بمساحة صالحة للنقر. وعندما تضيق النافذة يعيد المتصفح القسمة.

لا تعني قيمة النمو اثنين أن العرض النهائي سيصبح دائماً ضعف عرض الجار. يبدأ كل طفل بحجم مختلف، وقد تقيده حدود. يوزع الفراغ الموجب وفق عوامل النمو؛ ويستدعي العجز عوامل الانكماش والأحجام. السؤال النافع هو: من يتحمل التغير حين تتغير الحاوية؟ يكتب المؤلف العلاقة في CSS، ويتولى المتصفح الحساب عند كل عرض جديد.

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

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

شددت توصية W3C المرشحة في 19 نوفمبر 2018 على هذا الفرق. تصلح order والاتجاهات المعكوسة لترتيب المظهر، ولا تعالج ترتيب مصدر خاطئاً. وأضاف النص دقة مهمة في قسمة الفائض: عوامل نمو أقل من واحد قد تترك جزءاً من الفراغ الموجب بلا توزيع. لا يلزم أن يبتلع العنصر المرن آخر بكسل. الفراغ الذي بقي في طرف الشريط قد يكون تنفيذ القاعدة بحذافيرها.

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

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