حدد المحور قبل اختيار خاصية CSS
اقرأ أوراق زنبق الماء المستهدفة في المستوى، وتفحّص الترتيب الحالي للضفادع. في اتجاه الصف الافتراضي، يعمل justify-content على طول المحور الأفقي الرئيسي، بينما يعمل align-items على طول المحور الرأسي العرضي. قبل كتابة أي قيمة، حدّد المحور الذي تريد تغييره. هذه العادة تمنع خطأً شائعًا: اختيار القيمة التي تبدو صحيحة لخاصية تتحكم في اتجاه مختلف.
عندما يتغير flex-direction إلى عمود، يتغير المحوران الرئيسي والعرضي تبعًا لذلك. أعد تقييم الخاصية بدلًا من افتراض أن justify-content تعني دائمًا حركة أفقية. أدخل تغييرًا واحدًا CSS في المحرر، وقارن المواضع الناتجة مع الأهداف. يتم تحديد موضع الضفادع بواسطة CSS الذي تُدخله، وليس عن طريق السحب. استخدم تلميحات المستوى والخصائص المسموح بها لربط التجربة بالمهمة المعروضة.
اشرح أي تغيير غير ناجح قبل تجربة تغيير آخر.
بعد فشل التغيير في تحقيق الهدف، اسأل نفسك ما إذا كانت الخاصية قد أثرت على المحور الخاطئ، أو أن القيمة المختارة رتبت العناصر بشكل مختلف عما توقعته، أو أن الاتجاه الحالي قد غيّر معنى التخطيط. احتفظ بجزء القاعدة الذي تفهمه، وعدّل شيئًا واحدًا فقط. قد يؤدي استبدال عدة خصائص في وقت واحد إلى تحقيق الهدف، لكنك ستظل غير متأكد من التغيير الذي حلّ المشكلة.
كتمرين مراجعة، صف القاعدة الناجحة كتابيًا قبل الانتقال إلى المستوى التالي: ما المحور الذي استخدمته، وكيف وضعت الضفادع بالنسبة إلى أوراق زنبق الماء. يمكن دمج الأفكار في المستويات اللاحقة، لذا فإن هذا الشرح أكثر فائدة من حفظ سطر دون سياقه. لا يُقدّم هذا الدليل قائمة إجابات كاملة مُختلقة، ولا يدّعي أن حلّ اللعبة يُؤهّلك لمهارة احترافية في CSS. تُتيح صفحة اللعب المُرتبطة للمُحرّر أدوات تحكّم وتحديدًا دقيقًا للمهام؛ بينما يُساعدك المركز على فهم اللعبة وتطبيقها عمليًا على جميع المستويات التي ستواجهها.
على سبيل المثال، إذا غيّرت إحدى القواعد حركة الضفادع عموديًا بينما كنتَ تنوي تحريكها أفقيًا، فافحص flex-direction وحدّد المحور الرئيسي الحالي قبل اختيار قيمة أخرى. اشرح العلاقة بصوت عالٍ: هذه الخاصية تُغيّر التوزيع على طول المحور الرئيسي، والمحور الرئيسي حاليًا يسير في هذا الاتجاه. ثمّ قم بإجراء تعديل واحد وتحقق من النتيجة. بمجرد أن تعمل، اختبر تفسيرك على أوراق زنبق الماء الظاهرة. هذا يُحوّل التخمين الخاطئ إلى فكرة تصميم قابلة لإعادة الاستخدام بدلًا من أمر تتذكره لشاشة واحدة فقط.
نصائح واستراتيجيات Flexbox Froggy
حدّد نصيحة للتدرّب عليها في الجولة المقبلة. هذه القائمة لا تغيّر اللعبة ولا تحفظ تقدّمك فيها.
أسئلة وأجوبة حول Flexbox Froggy
هل أحتاج إلى تثبيت أداة برمجة؟
لا. محرر CSS موجود داخل لعبة المتصفح.
هل هذه دورة كاملة في تطوير مواقع الويب؟
هي لعبة تدريبية تفاعلية لمفاهيم تصميم Flexbox. وهي لا تغني عن دورة HTML و CSS الأوسع نطاقًا.
من قام بإنشاء المشروع؟
قام Thomas Park بإنشاء Flexbox Froggy. المصدر مرخص بموجب ترخيص MIT، ويستخدم العمل الفني المسجل CC BY 3.0؛ روابط الإسناد موجودة أدناه.
لماذا ينقل flex-end الضفدع إلى الجهة الأخرى بعد عكس الاتجاه؟
تتبع بداية Flexbox ونهايته المحور الرئيسي الحالي، لا حافتي اليمين واليسار الثابتتين. مع row-reverse تبدأ جهة المحور من اليمين، لذلك ينقل justify-content: flex-end العناصر إلى اليسار. افحص flex-direction أولاً ثم اختر المحاذاة. يغيّر align-items المحور المتقاطع، لذا يعالج مشكلة موضع مختلفة.