Identifiez l'axe avant de choisir une propriété CSS
Lisez les nénuphars cibles du niveau et inspectez la disposition actuelle des grenouilles. Dans la direction de ligne par défaut, justify-content fonctionne le long de l'axe principal horizontal et align-items le long de l'axe transversal vertical. Avant de saisir une valeur, indiquez quel axe vous souhaitez modifier. Cette habitude évite une erreur courante : choisir la bonne valeur pour une propriété qui contrôle une direction différente.
Lorsque flex-direction passe en colonne, les axes principal et transversal changent avec lui. Réévaluez la propriété au lieu de supposer que justify-content signifie toujours un mouvement horizontal. Saisissez une modification CSS dans l'éditeur et comparez les positions résultantes avec les cibles. Les grenouilles sont positionnées par votre CSS, et non mises en place. Utilisez les astuces du niveau et les propriétés autorisées pour que l'expérience reste liée à la tâche réellement affichée.
Expliquer un changement infructueux avant d'en tenter un autre
Après qu'un changement manque la cible, demandez si la propriété a affecté le mauvais axe, si la valeur choisie a disposé les éléments différemment de vos attentes ou si la direction actuelle a modifié le sens de la mise en page. Conservez la partie de la règle que vous comprenez et révisez une chose. Le remplacement de plusieurs propriétés à la fois peut atteindre l'objectif tout en vous laissant incertain quant au changement qui a résolu le problème.
Pour un exercice de révision, décrivez verbalement la règle réussie avant de poursuivre : quel axe elle a utilisé et comment elle a positionné les grenouilles par rapport aux nénuphars. Les niveaux ultérieurs peuvent combiner des idées, cette explication est donc plus utile que de mémoriser une ligne sans son contexte. Ce guide ne fournit pas de liste de réponses complète inventée et ne prétend pas que la résolution du jeu certifie une compétence professionnelle CSS. La page de lecture liée donne à l'éditeur des contrôles et un cadrage précis des tâches ; le centre soutient la compréhension et la pratique à travers les niveaux que vous rencontrez réellement.
Par exemple, si une règle modifie les grenouilles verticalement alors que vous souhaitiez un mouvement horizontal, inspectez flex-direction et identifiez l'axe principal actuel avant de sélectionner une autre valeur. Dites la relation à haute voix : cette propriété modifie la distribution le long de l'axe principal, et l'axe principal s'étend actuellement dans cette direction. Ensuite, effectuez une modification et inspectez le résultat. Une fois que cela fonctionne, testez votre explication par rapport aux nénuphars visibles. Cela transforme une supposition ratée en une idée de mise en page réutilisable au lieu d'une commande dont vous vous souvenez uniquement pour un seul écran.
Conseils et stratégie pour la Flexbox Froggy
Cochez un conseil à travailler lors de votre prochaine partie. Cette liste ne modifie pas le jeu et ne sauvegarde pas votre progression.
Questions et réponses concernant le Flexbox Froggy
Dois-je installer un outil de programmation ?
Non. L'éditeur CSS se trouve à l'intérieur du jeu par navigateur.
S'agit-il d'un cours complet de développement web ?
Il s'agit d'un jeu d'exercices interactif sur les concepts de mise en page Flexbox. Il ne remplace pas un cours plus complet sur HTML et CSS.
Qui a créé ce projet ?
Thomas Park a créé Flexbox Froggy. Le code source est sous licence MIT et l'illustration enregistrée utilise CC BY 3.0 ; les liens d'attribution se trouvent ci-dessous.
Pourquoi flex-end change-t-il de côté après l’inversion de direction ?
Le début et la fin suivent l’axe principal, pas des bords gauche et droit fixes. Avec row-reverse, l’axe commence à droite : justify-content: flex-end place donc les éléments à gauche. Vérifiez flex-direction avant de choisir l’alignement. align-items agit sur l’axe transversal et répond à un autre problème de position.
Commandes et instructions complètes
Commandes et instructions complètes
Jouer à Flexbox Froggy