Identificare l'asse prima di scegliere una proprietà CSS
Leggi le ninfee target del livello e controlla l'attuale disposizione delle rane. Nella direzione predefinita della riga, justify-content funziona lungo l'asse principale orizzontale e align-items lungo l'asse trasversale verticale. Prima di digitare un valore, indica quale asse desideri modificare. Questa abitudine previene un errore comune: scegliere il valore giusto per una proprietà che controlla una direzione diversa.
Quando flex-direction cambia in colonna, gli assi principale e trasversale cambiano con esso. Rivalutare la proprietà invece di dare per scontato che justify-content significhi sempre movimento orizzontale. Inserisci una CSS modifica nell'editor e confronta le posizioni risultanti con i target. Le rane vengono posizionate dal tuo CSS, non trascinate in posizione. Utilizza i suggerimenti del livello e le proprietà consentite per mantenere l'esperimento legato all'attività effettivamente mostrata.
Spiegare una modifica non riuscita prima di provarne un'altra
Dopo che una modifica non ha raggiunto l'obiettivo, chiedi se la proprietà ha influenzato l'asse sbagliato, il valore scelto ha disposto gli elementi in modo diverso dalle tue aspettative o la direzione corrente ha cambiato il significato del layout. Mantieni la parte della regola che capisci e rivedi una cosa. La sostituzione di più proprietà contemporaneamente può raggiungere l'obiettivo lasciandoti incerto su quale modifica abbia risolto il problema.
Per un esercizio di ripasso, descrivi a parole la regola di successo prima di proseguire: quale asse ha utilizzato e come ha posizionato le rane rispetto alle ninfee. I livelli successivi possono combinare le idee, quindi questa spiegazione è più utile che memorizzare una riga senza il suo contesto. Questa guida non fornisce un elenco di risposte completo inventato né afferma che la risoluzione del gioco certifichi l'abilità professionale di CSS. La pagina di riproduzione collegata fornisce all'editor i controlli e l'esatta inquadratura delle attività; il centro supporta la comprensione e la pratica attraverso i livelli che effettivamente incontri.
Ad esempio, se una regola modifica i fessure verticalmente quando si intendeva il movimento orizzontale, ispezionare flex-direction e identificare l'asse principale corrente prima di selezionare un altro valore. Pronuncia la relazione ad alta voce: questa proprietà cambia la distribuzione lungo l'asse principale e l'asse principale attualmente corre in questa direzione. Quindi apporta una modifica e controlla il risultato. Una volta che funziona, prova la tua spiegazione rispetto alle ninfee visibili. Ciò trasforma un'ipotesi fallita in un'idea di layout riutilizzabile invece di un comando che ricordi solo per una schermata.
Suggerimenti e strategie per Flexbox Froggy
Seleziona un consiglio da provare nella prossima partita. Questo elenco non modifica il gioco né salva i progressi.
Domande e risposte sul modello Flexbox Froggy
Devo installare uno strumento di programmazione?
No. L'editor CSS si trova all'interno del gioco per browser.
Si tratta di un corso completo di sviluppo web?
Si tratta di un gioco interattivo per esercitarsi sui concetti di layout flexbox. Non sostituisce un corso più completo di HTML e CSS.
Chi ha creato il progetto?
Thomas Park ha creato Flexbox Froggy. Il codice sorgente è rilasciato sotto licenza MIT e l'immagine registrata utilizza CC BY 3.0; i link per l'attribuzione sono riportati di seguito.
Perché flex-end cambia lato quando inverto la direzione?
Inizio e fine seguono l’asse principale, non bordi sinistro e destro fissi. Con row-reverse l’asse parte da destra, quindi justify-content: flex-end dispone gli elementi a sinistra. Controlla flex-direction prima dell’allineamento. align-items agisce sull’asse trasversale e risolve un diverso problema di posizione.