شاهد الحلقة المباشرة الآن على الرابط 

http://live.school.oigency.com

كنوع من المبادرات والمشاريع التي تقوم بها أوجنسي اتجاه المجتمع العربي تحديداً. هو تعزيز المحتوى العربي على الانترنت. فحاليا يجري العمل على ترجمة المقال المتعلق في خاصية CSS الصندوق المرن ( اسلوب عرض فلكس ) والتي ستقوم على اساسها حلقة البث المباشر اليوم الساعة السادسة والسبع دقائق بتوقيت عمّان. والتالي هو النص الذي تم المساهمة فيه على موقع MDN الرسمي.



يشار لوحدة الصندوق المرن عادةً  بالflexbox وقد تم تصميمها كنموذج تخطيط احادي البعد. وكطريقة يمكنها ان تعرض توزيع المسافات بين العناصر في واجهة وقدرات محاذاة (ترتيب) قوية. تقدم هذه المقالة الخطوط العريضة للميزات الرئيسية لفلكس بوكس (flexbox)، والتي سنكتشف تفاصيلها في بقية هذه الارشادات.

عندما نوصف الفلكس بوكس بأنه احادي البعد، نقوم بوصف الحقيقة ان الفلكس بوكس يتعامل مع المخطط في بعد واحد في ذات الوقت — إما كصف أو كعمود. وهذا يمكن أن يتناقض مع نموذج ثنائي الأبعاد الخاص بـتخطيط شبكة CSS Grid والذي يتحكم في الصفوف والاعمدة معاً.

مِحوَريّ الفلكس بوكس

عندما نشتغل بفلكس بوكس نحتاج للتفكير في محورين — المحور الاساشي او الرئيسي ومحور التقاطع (المتقاطع).
يتم تعريف المحور الرئيسي بإستخدام الخاصية {{cssxref("flex-direction")}}
ومن هناك يتم تعامد المحور المتقاطع بناءًا على المحور الرئيسي.
لذا يجدر فهم كيفية عملها منذ البداية.

المحور الرئيسي

يتم تعريف المحور الرئيسي عن طريق flex-direction  ، والتي لديها اربع قيم ممكنة هي:

  • الصف row
  • الصف المعكوس row-reverse
  • العامود column
  • العامود المعكوس column-reverse

هل تختار الصف او الصف المعكوس؟ سيشتغل المحور الاساسي في اتجاه مضمَن مع الصف.

.display.flex.rows{
    flex-direction: row;
}

اختر العامود او العامود المعكوس وسيعمل المحور الاساسي من رأس الصفحة الى قاعها في اتجاه السد

.display.flex.rows{
    flex-direction: column;
}

محور التقاطع

يتعامد محور التقاطع على المحور الرئيسي الذي تم تعريفة مسبقا باستخدام flex-direction كصف row  او صف معكوس row-reverse  فيشغل دور الاعمدة.

أما لو كان عامود column او عامود معكوس column-reverse  فيشغل محور التقاطع دور الصف.

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

خطوط البداية والنهاية

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

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

اذا كان الصف هو اتجاه فلكس،  flex-direction: row ونعمل باستخدام اللغة الانجليزية.
اذن ستكون حافة البداية للمحور الاساسي على اليسار ويقابلها على الجهة الاخرى علي اليمين حافة النهاية.

اما اذا كنا سنستخدم اللغة العربية، فستكون حافة البداية للمحور الاساسي على اليمين ويقابلها على الجهة الاخرى علي اليسار حافة النهاية.

وفي كلا الحالتين ستكون حافة البداية للمحور المتقاطع في الاعلى من حاوية الفلكس وحافة النهاية في اسفلها. وذلك لان اللغتين يسيرون في سياق افقي للكتابة.

بعد فترة، التفكير في البداية والنهاية بدلا من الايمن والايسر سيصبح طبيعيا اكثر. وسيكون مفيدا عن التعامل مع وسائل التخطيط الاخرى مثل مخطط الشبكة CSS Grid Layout الذي يتبع النمط نفسه.

حاوية فلكس

وهي ما سنتحدث عنه في تفصيل اكبر في الحلقة القادمة.

ترقبوها 

 

يمكنكم تحميل ملف الصفحة الشخصية المفتوح المصدر عبر اخذ قضمة من المشروع على موقع codepen
https://codepen.io/oigency/pen/KKpbxWw