Flexbox Froggy

32

Flexbox Froggy ile yapabilecekleriniz Flexbox’ın tüm temellerini kurbağalar ve lilypadler (Nilüfer yaprağı) içeren eğlenceli bir web oyunu ile öğrenin. Kulağa çılgınca geldiğini biliyorum ama bu gerçekten harika bir webapp..

Flexbox Froggy Anasayfa

Seviye 1’den başlarsınız ve 24 farklı seviye boyunca yavaşça yoluna devam ederek Flexbox oryantasyonunun birçok yönünü öğrenirsiniz. Erken seviye kolay şekilde başlar ve  bir ya da iki kurbağayı tek bir kap boyunca hizalamanızı ister. Erken dersler aynı zamanda size yardımcı olacak ipuçları ve öneriler içerir.

Justify – content Komutu

Justify – contet Komutları

Bu, ana eksen boyunca hizalamayı tanımlar. Bir satırdaki tüm esnek öğeler esnek olmadığında veya esnek olduğunda ancak maksimum boyutlarına ulaştığında fazladan boş alan dağıtılmasına yardımcı olur. Ayrıca, satırdan taştıklarında öğelerin hizalanması üzerinde bir miktar kontrol uygular.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
  • flex-start (varsayılan): öğeler esnek yönün başlangıcına doğru hizalanır.
  • flex-end: öğeler esnek yönün sonuna doğru hizalanır.
  • start: öğeler writing-modeyönün başlangıcına doğru hizalanır.
  • end: öğeler writing-modeyönün sonuna doğru hizalanır.
  • left: öğeler kabın sol kenarına doğru hizalanır.
  • right: öğeler, kutunun sağ kenarına doğru hizalanır.
  • center: öğeler çizgi boyunca ortalanır.
  • space-between: öğeler satırda eşit olarak dağıtılır; ilk öğe başlangıç ​​satırında, son öğe bitiş satırında.
  • space-around: öğeler, etraflarında eşit boşluk kalacak şekilde satırda eşit olarak dağıtılır. Tüm öğeler her iki tarafta eşit alana sahip olduğundan, görsel olarak boşlukların eşit olmadığını unutmayın. İlk öğe, kap kenarına karşı bir birim boşluğa sahip olacak, ancak sonraki öğe arasında iki birim boşluk olacaktır, çünkü bir sonraki öğenin kendi aralığı geçerli olacaktır.
  • space-evenly: öğeler, herhangi iki öğe arasındaki boşluk (ve kenarlara kadar olan boşluk) eşit olacak şekilde dağıtılır.

Align-items Komutu

Dikey Hizalama Öğeleri Komutları

Bu, esnek öğelerin geçerli satırdaki çapraz eksen boyunca nasıl yerleştirildiğine ilişkin varsayılan davranışı tanımlar . Bunu justify-contentçapraz eksen versiyonu olarak düşünün ( ana eksene dik).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • stretch (varsayılan): kabı doldurmak için uzat (yine de min-genişlik / maks-genişliğe saygı göster).
  • flex-startstartself-start: öğeler çapraz eksenin başlangıcına yerleştirilir. Bunlar arasındaki fark ince ve flex-directionkurallara veya kurallara saygı writing-modeduymakla ilgilidir.
  • flex-endendself-end: öğeler çapraz eksenin sonuna yerleştirilir.
  • center: öğeler çapraz eksende ortala.
  • baseline: öğeler, taban çizgilerinin hizalanması gibi hizalanır.

Align-content Komutu


Hizalama İçeriği

Bu, çapraz eksende fazladan boşluk olduğunda içindeki esnek kabın çizgilerini justify-content, ana eksendeki tek tek öğeleri nasıl hizaladığına benzer şekilde hizalar.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
  • normal (varsayılan): öğeler, hiçbir değer ayarlanmamış gibi varsayılan konumlarında hizalanır.
  • flex-startstart: konteynerin başlangıcına kadar hizalanmış öğeler. 
  • flex-endend: kabın sonuna kadar hizalanmış ürünler.
  • center: konteyner içinde ortalanmış öğeler.
  • space-between: eşit olarak dağıtılan öğeler; ilk satır konteynerin başında, son satır ise sondadır.
  • space-around: her satırda eşit aralıklarla eşit olarak dağıtılmış öğeler.
  • space-evenly: öğeler etraflarında eşit boşluk kalacak şekilde eşit olarak dağıtılır.
  • stretch: çizgiler kalan alanı kaplayacak şekilde uzar.

Her dersi aştığınızda şunları öğreneceksiniz; öğeleri bir kap içinde düzenlemek, dikine veya yatay nasıl düzenleneceği ve nasıl oluşturulur, eşit aralık farklı içeriklerin farklı satırlar arasında konumlandırılması gibi.

Sevimli küçük kurbağalar hoşunuza gidebilir, ancak bunun zor bir oyun olduğunu unutmayın !

Oyun sarmal öğrenme şeklinde ilerler. İlk dersler kolay ve ipuçlarıyla doludur fakat bölümler ilerledikçe bu ipuçları gidecek ve önceki bilgilerle soruları çözmenizi isteyecektir. Bu sayede oyun acemilikten daha deneyimli web geliştiricisi olmanıza yardımcı olur.

Flexbox hakkında daha fazla bilgi edinmenize yardımcı olacak birkaç başka kaynak:

Flexbox öğrenmeye değer başka bağlantılar varsa, bunları aşağıdaki yorumlarda yayınlamaktan çekinmeyin 🙂

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz