Μάθετε CSS με παιχνίδια: Flexbox Froggy και Grid Garden

Ξεκινήστε με το Flexbox Froggy για να εξασκηθείτε στην ευθυγράμμιση κατά μήκος ενός άξονα και, στη συνέχεια, χρησιμοποιήστε το Grid Garden για να εξασκηθείτε στην τοποθέτηση ενός αντικειμένου ανάμεσα στις γραμμές πλέγματος. Μετά από κάθε άσκηση παιχνιδιού, αναπαράγετε την ιδέα σε μια μικρή δική σας σελίδα. Ένα χρήσιμο αποτέλεσμα είναι να μπορείτε να εξηγήσετε γιατί μια δήλωση λειτουργεί όταν αλλάζει η διάταξη, αντί να θυμάστε την απάντηση ενός συγκεκριμένου επιπέδου.

Πώς να μάθετε CSS με παιχνίδια και στη συνέχεια να το εφαρμόσετε

Αυτή η διαδρομή συνδυάζει δύο παιχνίδια με τρεις πρωτότυπες ασκήσεις. Είναι κατάλληλη για κάποιον που μπορεί να διαβάσει έναν απλό κανόνα CSS και θέλει ορατά σχόλια. Δεν είναι ένα πλήρες μάθημα ανάπτυξης ιστοσελίδων: οι πραγματικές διεπαφές χρειάζονται επίσης αναγνώσιμο περιεχόμενο, συμπεριφορά που ανταποκρίνεται στις ανάγκες, πρόσβαση στο πληκτρολόγιο και δοκιμές με διαφορετικές ποσότητες κειμένου.

Επιλέξτε τη σωστή άσκηση για την ερώτησή σας

Τα παιχνίδια είναι από το Codepip. Το Cozcade συνδέει κάθε φιλοξενούμενο παιχνίδι με τον αντίστοιχο οδηγό του: Flexbox Froggy και ο οδηγός του· Grid Garden και ο οδηγός του. Οι αρχικές σελίδες Froggy και Grid Garden παρέχουν τις δικές τους εκδόσεις των συγγραφέων. Χρησιμοποιήστε πληκτρολόγιο όταν ακολουθείτε τις ασκήσεις κώδικα εδώ.

Πρώτα, ονομάστε τον άξονα πριν επιλέξετε μια ιδιότητα

Το Flexbox έχει έναν κύριο άξονα και έναν εγκάρσιο άξονα. Το flex-direction ορίζει την κύρια κατεύθυνση. Το justify-content τοποθετεί τα στοιχεία κατά μήκος αυτού του κύριου άξονα, ενώ το align-items αφορά τον εγκάρσιο άξονα. Σε μια κανονική σειρά από αριστερά προς τα δεξιά, ο κύριος άξονας είναι οριζόντιος. Αλλάξτε την κατεύθυνση σε στήλη και γίνεται κάθετος. Αυτοί οι ορισμοί καλύπτονται στην Εισαγωγή στο Flexbox του MDN.

Πριν δοκιμάσετε δηλώσεις στο Froggy, πείτε προς ποια κατεύθυνση θέλετε να κινηθούν τα στοιχεία. Στη συνέχεια, ονομάστε αυτήν την κατεύθυνση σε σχέση με τον τρέχοντα κύριο άξονα. Αυτό μετατρέπει μια λάθος απάντηση σε μια συγκεκριμένη ερώτηση: επιλέξατε λάθος ιδιότητα, λάθος τιμή ή λάθος άξονα;

Άσκηση 1: μετακινήστε μια ομάδα στο τέλος

Δημιουργήστε τρία μικρά αντικείμενα μέσα σε ένα δοχείο. Αυτή είναι μια πρωτότυπη άσκηση, όχι ένα αντιγραμμένο επίπεδο παιχνιδιού ή κλειδί απαντήσεων.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Ο στόχος σας είναι να μετακινήσετε τα τρία αντικείμενα μαζί προς τη δεξιά άκρη χωρίς να αλλάξετε τη σειρά τους ή να δώσετε σε κάθε αντικείμενο ξεχωριστό περιθώριο. Προβλέψτε το αποτέλεσμα και, στη συνέχεια, προσθέστε το justify-content: flex-end στο δοχείο.

Τώρα συγκρίνετέ το με το justify-content: space-between. Η πρώτη επιλογή μετακινεί την ομάδα. η δεύτερη κατανέμει τον διαθέσιμο χώρο μεταξύ των αντικειμένων. Δοκιμάστε ένα στενό και ένα φαρδύ δοχείο. Εξηγήστε ποια έκδοση θα επιλέγατε για τρία κουμπιά που πρέπει να παραμένουν κοντά το ένα στο άλλο. Το ορατό αποτέλεσμα έχει μεγαλύτερη σημασία από το να θυμάστε μία τιμή.

Άσκηση 2: διατηρήστε την ίδια εντολή, αλλάξτε τον άξονα

Επαναχρησιμοποιήστε αυτό το κοντέινερ, προσθέστε flex-direction: column, ορίστε height: 12rem και διατηρήστε το justify-content: flex-end. Τα στοιχεία τώρα συγκεντρώνονται προς τα κάτω. Η δήλωσή σας δεν έγινε εντολή "μετακίνησης δεξιά": εξακολουθεί να λειτουργεί κατά μήκος του κύριου άξονα, τον οποίο αλλάξατε.

Στη συνέχεια, προσθέστε align-items: flex-start. Συγκρίνετε τη διάταξη πριν και μετά από αυτήν την προσθήκη. Με την καθορισμένη κατεύθυνση από αριστερά προς τα δεξιά, τα στοιχεία ευθυγραμμίζονται προς τα αριστερά στον εγκάρσιο άξονα. Αφαιρέστε τη δήλωση και παρατηρήστε ξανά την προεπιλεγμένη συμπεριφορά τάνυσης.

Γράψτε μια σύντομη εξήγηση και των δύο αλλαγών χωρίς να χρησιμοποιήσετε τη φράση "απλώς λειτουργεί". Για παράδειγμα, προσδιορίστε τον άξονα, τον ελεύθερο χώρο και την ομάδα που τοποθετείται. Εάν δεν μπορείτε να εξηγήσετε ένα αποτέλεσμα, μειώστε το παράδειγμα σε δύο στοιχεία και αλλάξτε μόνο μία δήλωση κάθε φορά. Αυτή είναι η συνήθεια που πρέπει να υιοθετήσετε ξανά στο παιχνίδι.

Στη συνέχεια, διακρίνετε ένα ίχνος πλέγματος από τα όριά του

Η τοποθέτηση πλέγματος χρησιμοποιεί γραμμές που περιβάλλουν γραμμές και στήλες. Πέντε σαφείς στήλες έχουν έξι γραμμές ορίου. Ένα στοιχείο που τοποθετείται από τη γραμμή 3 της στήλης έως τη γραμμή 5 εκτείνεται σε δύο στήλες, όχι σε τρεις. Δείτε την Εισαγωγή στο Πλέγμα του MDN για τη διάκριση μεταξύ ιχνών, κελιών και γραμμών.

Στο Grid Garden, διαβάστε τα όρια αρχής και τέλους πριν δοκιμάσετε μια θέση. Στη δική σας σελίδα, σχεδιάστε ή ονομάστε τα όρια εάν η μέτρηση των κενών σας προκαλεί σύγχυση.

Άσκηση 3: τοποθετήστε μια κάρτα ανάμεσα σε δύο γραμμές

Κατασκευάστε έναν πίνακα πέντε στηλών και δώστε του μία κάρτα:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Προβλέψτε πού θα εμφανιστεί η κάρτα πριν ανοίξετε τη σελίδα. Στη συνέχεια, κάντε την να εκτείνεται σε ολόκληρο τον πίνακα αλλάζοντας μόνο την τοποθέτηση των στηλών της. Με τις πέντε σαφείς στήλες παραπάνω, το grid-column: 1 / 6 εκτείνεται από το πρώτο όριο έως το τελευταίο.

Τέλος, αλλάξτε το κείμενο σε μια πολύ μεγαλύτερη πρόταση και περιορίστε το πρόγραμμα περιήγησης. Ο κανόνας τοποθέτησης μπορεί να παραμείνει σωστός ενώ η παρουσίαση σταθερού ύψους της κάρτας καθίσταται ακατάλληλη για το περιεχόμενό της. Η επίλυση μιας άσκησης παιχνιδιού διδάσκει ένα μέρος της διάταξης. Η δημιουργία μιας εύχρηστης σελίδας απαιτεί και τον έλεγχο του περιεχομένου.

Χρησιμοποιήστε την πρόοδο του παιχνιδιού ως ανατροφοδότηση, όχι ως απόδειξη της μαεστρίας

Μετά από μια επιτυχημένη άσκηση, αλλάξτε μία υπόθεση: την κατεύθυνση, τον αριθμό των στοιχείων, το διαθέσιμο πλάτος ή το μήκος του κειμένου. Προβλέψτε το αποτέλεσμα πριν το ψάξετε. Αν μπορείτε να προσαρμόσετε την ιδέα και να εξηγήσετε την αλλαγή, έχετε μάθει περισσότερα από μια απλή απάντηση επιπέδου.

Όταν επιστρέφετε σε ένα παιχνίδι, βεβαιωθείτε ότι ανοίγετε την ίδια έκδοση και το ίδιο περιβάλλον προγράμματος περιήγησης. Τα αγαπημένα του λογαριασμού Cozcade προσδιορίζουν τα παιχνίδια που θέλετε να ξαναδείτε. Δεν αποτελούν υπόσχεση ότι η εσωτερική πρόοδος του μαθήματος ενός παιχνιδιού μεταφέρεται μεταξύ συσκευών. Αποφύγετε τη διαγραφή αποθηκευμένων δεδομένων ιστότοπου κατά την έρευνα της προόδου και χρησιμοποιήστε μια σαφή λειτουργία εξαγωγής μόνο εάν το συγκεκριμένο παιχνίδι παρέχει μία.

Συνεχίστε με τον οδηγό αντιστοίχισης

Χρησιμοποιήστε τον οδηγό Froggy για εξάσκηση αξόνων και ευθυγράμμισης και τον οδηγό Grid Garden για ερωτήσεις τοποθέτησης. Αν θέλετε έναν άλλο τύπο εξάσκησης στη συνέχεια, περιηγηθείτε στα παιχνίδια μάθησης.

Οι παραπάνω ασκήσεις γράφτηκαν για αυτό το άρθρο. Οι σελίδες αναφοράς ελέγχθηκαν στις 11 Οκτωβρίου 2026. Οι καταγεγραμμένοι έλεγχοι παιχνιδιού μας καλύπτουν έναν μικρό αριθμό αλληλεπιδράσεων στην επιφάνεια εργασίας, όχι την ολοκλήρωση όλων των επιπέδων ή ένα πλήρες μάθημα για κινητά. Αυτό το άρθρο διδάσκει μια ακολουθία εξάσκησης. Δεν απονέμει πιστοποίηση ούτε αντικαθιστά τον έλεγχο των δικών σας διεπαφών.

Παιχνίδια που μπορείτε να παίξετε στο Cozcade

Flexbox FroggyGrid Garden