أنماط فليكس بوكس مكتبة كود فليكس بوكس في نهاية المطاف
أحدث خاصية فليكس بوكس CSS قد غيرت جذريًا طريقة إنشاء المطورين للواجهات. لا مزيد من العوامات و CSS الخارقة للحصول على تخطيطات محاذاة تماما. لا داعي للقلق بشأن التقنيات المخصصة المستجيبة للتعامل مع المخططات متعددة الأعمدة.
ولكن على الرغم من أن flexbox يحل العديد من المشكلات ، إلا أنه من المعقول تعلمها. لمساعدتك في البدء ، توجد مكتبة جديدة على الإنترنت تدعى Flexbox Patterns والتي تقوم بفهرسة العديد من عناصر Flexbox المختلفة في موقع مركزي واحد.
هذه المكتبة مجانية تمامًا للاستخدام وهي مفتوحة المصدر على جيثب. كل الأمثلة يمكن أن يكون تحميلها محليا من خلال NPM أو من خلال جيثب. ولكن يمكنك أيضًا استعراض الأمثلة عبر موقع الويب لنسخ الرموز ولصقها حسب الحاجة.
كل نمط له صفحته الخاصة مع وصف موجز ونماذج الكود. يمكنك حرفيا تماما انسخ الشفرات والصقها في مشروع الويب الحالي, على الرغم من أنه من الموصى به أن تتعلم أولاً القليل عن ما تفعله الشفرة ولماذا تستخدمه.
خذ على سبيل المثال العرض التوضيحي لشريط رأس الموقع باستخدام flexbox لمحاذاة جميع العناصر في شريط التنقل العلوي جنبًا إلى جنب.
عادةً ما يتطلب ذلك تعويمًا وفئة clearfix للحصول على كل شيء محاذٍ بشكل صحيح.
مع flexbox يمكنك الاحتفاظ بكل شيء في حاوية واحدة باستخدام عرض: المرن خاصية. بهذه الطريقة يمكنك تحديد كيفية تفاعل العناصر مع بعضها البعض وكيف فليكس بوكس يجب أن تعمل على شاشات أصغر.
يتم تحديث الأنماط باستمرار وتركز المكتبة الحالية على العناصر الأكثر شيوعًا مثل علامات التبويب والأشرطة الجانبية والتوسيط العمودي / الأفقي.
إذا كنت جديدًا على flexbox ، فعليك بالتأكيد مراجعة Flexbox Patterns. لن يعلمك الموقع جميع أساسيات فليكس بوكس لكنه سوف يقدم أمثلة من العالم الحقيقي يمكنك العبث بها لمشاريع الويب الخاصة بك.
