Bir CSS özelliği seçmeden önce ekseni tanımlayın
Seviyenin hedef nilüfer yapraklarını okuyun ve kurbağaların mevcut düzenini inceleyin. Varsayılan satır yönünde, justify-content yatay ana eksen boyunca ve align-items dikey çapraz eksen boyunca çalışır. Değer yazmadan önce hangi ekseni değiştirmek istediğinizi belirtin. Bu alışkanlık yaygın bir hatayı önler: Farklı bir yönü kontrol eden bir özellik için doğru görünen değeri seçmek.
flex-direction sütuna değiştiğinde, ana ve çapraz eksenler de onunla birlikte değişir. justify-content ifadesinin her zaman yatay hareket anlamına geldiğini varsaymak yerine özelliği yeniden değerlendirin. Düzenleyiciye bir CSS değişiklik girin ve ortaya çıkan konumları hedeflerle karşılaştırın. Kurbağalar CSS tarafından konumlandırılır, yerlerine sürüklenmez. Denemeyi gerçekte gösterilen göreve bağlı tutmak için seviyenin ipuçlarını ve izin verilen özellikleri kullanın.
Başka bir değişiklik denemeden önce başarısız bir değişikliği açıklayın
Bir değişiklik hedefi kaçırdıktan sonra, özelliğin yanlış ekseni etkileyip etkilemediğini, seçilen değerin öğeleri beklentinizden farklı şekilde düzenleyip düzenlemediğini veya mevcut yönün düzenin anlamını değiştirip değiştirmediğini sorun. Kuralın anladığınız kısmını koruyun ve bir şeyi revize edin. Aynı anda birkaç özelliği değiştirmek hedefe ulaşabilir ve hangi değişikliğin sorunu çözdüğünden emin olamamanıza neden olabilir.
Bir inceleme alıştırması için, devam etmeden önce başarılı kuralı kelimelerle açıklayın: hangi ekseni kullandığını ve kurbağaları nilüfer yapraklarına göre nasıl konumlandırdığını. Daha sonraki seviyeler fikirleri birleştirebilir, dolayısıyla bu açıklama, bir satırı bağlamı olmadan ezberlemekten daha faydalıdır. Bu kılavuz, icat edilmiş tam bir yanıt listesi sunmaz veya oyunu çözmenin profesyonel CSS beceriyi belgelediğini iddia etmez. Bağlantılı oyun sayfası editöre kontroller ve tam görev çerçeveleme olanağı sağlar; merkez, gerçekte karşılaştığınız seviyelerde anlayışı ve uygulamayı destekler.
Örneğin, yatay hareket istediğinizde bir kural kurbağaları dikey olarak değiştiriyorsa, başka bir değer seçmeden önce flex-direction'yı inceleyin ve mevcut ana ekseni tanımlayın. İlişkiyi yüksek sesle söyleyin: bu özellik ana eksen boyunca dağılımı değiştirir ve ana eksen şu anda bu yönde ilerler. Ardından bir düzenleme yapın ve sonucu inceleyin. İşe yaradıktan sonra açıklamanızı görünür nilüfer yapraklarıyla test edin. Bu, başarısız bir tahmini yalnızca bir ekran için hatırladığınız bir komut yerine yeniden kullanılabilir bir düzen fikrine dönüştürür.
Flexbox Froggy ipuçları ve stratejisi
Sonraki turda denemek için bir ipucu işaretleyin. Bu liste oyunu değiştirmez ve oyun ilerlemesini kaydetmez.
Flexbox Froggy ile ilgili sorular ve cevaplar
Kodlama aracı yüklemem gerekiyor mu?
Hayır. CSS editörü tarayıcı oyununun içinde yer alıyor.
Bu, eksiksiz bir web geliştirme kursu mu?
Bu, flexbox düzeni kavramları için etkileşimli bir uygulama oyunudur. Daha kapsamlı bir HTML ve CSS kursunun yerini tutmaz.
Bu projeyi kim oluşturdu?
Thomas Park, Flexbox Froggy'yi oluşturdu. Kaynak MIT lisanslıdır ve kaydedilen görselde CC BY 3.0 kullanılmıştır; atıf bağlantıları aşağıdadır.
Yönü ters çevirince flex-end neden taraf değiştiriyor?
Başlangıç ve bitiş sabit sol ve sağ kenarları değil ana ekseni izler. row-reverse sağdan başladığı için justify-content: flex-end öğeleri sola taşır. Önce flex-direction değerini kontrol edin. align-items çapraz ekseni değiştirir ve farklı konum sorununu çözer.
Kontroller ve tam oyun talimatları
Kontroller ve tam oyun talimatları
Flexbox Froggy oyna