Zidentyfikuj oś przed wyborem właściwości CSS
Przeczytaj docelowe liliowce na poziomie i sprawdź aktualne ułożenie żab. W domyślnym kierunku wiersza justify-content działa wzdłuż poziomej osi głównej, a align-items wzdłuż pionowej osi poprzecznej. Przed wpisaniem wartości określ, którą oś chcesz zmienić. Ten nawyk zapobiega częstemu błędowi: wybieraniu odpowiedniej wartości dla właściwości, która kontroluje inny kierunek.
Kiedy flex-direction zmienia się na kolumnę, wraz z nią zmieniają się osie główna i poprzeczna. Dokonaj ponownej oceny właściwości, zamiast zakładać, że justify-content zawsze oznacza ruch poziomy. Wprowadź jedną zmianę CSS w edytorze i porównaj powstałe pozycje z celami. Żaby są ustawiane przez twój CSS, a nie przeciągane na miejsce. Skorzystaj ze wskazówek dotyczących poziomu i dozwolonych właściwości, aby powiązać eksperyment z faktycznie pokazanym zadaniem.
Wyjaśnij nieudaną zmianę przed próbą kolejnej
Gdy zmiana nie dotrze do celu, zapytaj, czy właściwość wpłynęła na niewłaściwą oś, wybrana wartość ułożyła elementy inaczej niż oczekiwałeś, lub bieżący kierunek zmienił znaczenie układu. Zachowaj część zasady, którą rozumiesz i popraw jedną rzecz. Zastąpienie kilku właściwości na raz może osiągnąć cel, pozostawiając niepewność, która zmiana rozwiązała problem.
W ramach ćwiczenia powtórkowego opisz słownie skuteczną regułę, zanim przejdziesz dalej: jakiej osi używała i jak ustawiała żaby względem płatków liliowych. Na późniejszych poziomach można łączyć pomysły, więc to wyjaśnienie jest bardziej przydatne niż zapamiętywanie wersu bez jego kontekstu. Ten przewodnik nie zawiera wymyślonej pełnej listy odpowiedzi ani nie twierdzi, że rozwiązanie gry potwierdza umiejętności zawodowe CSS. Połączona strona odtwarzania zapewnia edytorowi kontrolę i dokładne ramowanie zadań; centrum wspiera zrozumienie i praktykę na wszystkich poziomach, z którymi faktycznie się spotykasz.
Na przykład, jeśli reguła zmienia żabki w pionie, gdy zamierzony był ruch w poziomie, sprawdź flex-direction i zidentyfikuj bieżącą oś główną przed wybraniem innej wartości. Wypowiedz na głos zależność: ta właściwość zmienia rozkład wzdłuż głównej osi, a główna oś aktualnie biegnie w tym kierunku. Następnie dokonaj jednej edycji i sprawdź wynik. Gdy już zadziała, przetestuj swoje wyjaśnienie na podstawie widocznych płatków lilii. Dzięki temu nieudane zgadnięcie stanie się pomysłem na układ do wielokrotnego użytku, a nie poleceniem, które pamiętasz tylko dla jednego ekranu.
Wskazówki i strategia dotyczące Flexbox Froggy
Zaznacz wskazówkę do przećwiczenia w następnej rundzie. Ta lista nie zmienia gry ani nie zapisuje postępów.
Pytania i odpowiedzi dotyczące Flexbox Froggy
Czy muszę zainstalować narzędzie do kodowania?
Nie. Edytor CSS znajduje się w grze przeglądarkowej.
Czy to jest kompleksowy kurs tworzenia stron internetowych?
To interaktywna gra ćwiczeniowa do nauki koncepcji układu Flexbox. Nie zastępuje ona szerszego kursu HTML i CSS.
Kto stworzył ten projekt?
Thomas Park stworzył Flexbox Froggy. Źródło jest objęte licencją MIT, a nagrana grafika wykorzystuje CC BY 3.0; linki do atrybucji znajdują się poniżej.
Dlaczego flex-end zmienia stronę po odwróceniu kierunku?
Początek i koniec zależą od osi głównej, nie stałych lewej i prawej krawędzi. Przy row-reverse oś zaczyna się po prawej, więc justify-content: flex-end układa elementy po lewej. Najpierw sprawdź flex-direction. align-items zmienia oś poprzeczną i rozwiązuje inny problem położenia.