Cara bermain Flex Antre Loket
- Baca instruksi level. Properti flexbox yang perlu kamu pakai disebut di sana.
- Tulis aturan CSS lengkap dengan selectornya, mis.
.antrean { ... }untuk wadah atau.kakek { ... }untuk satu orang. Orang-orang bergeser setiap kali kamu mengetik. - Cocokkan kotak hijau dengan kotak putus-putus, lalu tekan Cek jawaban atau Ctrl + Enter.
- Kalau belum pas, pesan cek menyebut orang pertama yang meleset dan arahnya.
- Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
- Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.
Yang kamu pelajari
- Level 1
display: flex
Mengubah wadah jadi flex container, sehingga anak-anaknya berjajar di satu sumbu.
- Level 2
justify-content
Posisi dan pembagian sisa ruang di sumbu utama:
flex-end,center,space-between, dan lainnya. - Level 4
align-items
Posisi semua anak di sumbu silang, tegak lurus dengan sumbu utama.
- Level 5
gap
Jarak tetap di antara anak, tanpa jarak tambahan di tepi wadah.
- Level 6
flex-direction
Arah sumbu utama.
columnmembuat anak bertumpuk ke bawah dan menukar peranjustify-contentdenganalign-items. - Level 7
order
Urutan tampil satu anak tanpa mengubah urutan HTML. Angka kecil tampil lebih dulu.
- Level 8
flex-wrap
Mengizinkan anak pindah ke baris berikutnya saat tidak muat, bukan mengecil.
- Level 9
flex-grow
Bagian sisa ruang yang diambil satu anak.
- Level 10
align-self
Menimpa
align-itemsuntuk satu anak saja.
Sumbu utama ikut flex-direction
justify-content selalu bekerja di sumbu utama, dan align-items di sumbu silang. Dengan flex-direction: row (bawaan), sumbu utama mendatar, jadi justify-content: center menaruh antrean di tengah kiri-kanan.
Begitu kamu menulis flex-direction: column, sumbu utama jadi tegak. Sekarang justify-content: center menaruh antrean di tengah atas-bawah, sedangkan align-items: center yang mengatur kiri-kanan.
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Kenapa jawaban yang berbeda bisa sama-sama benar?
Jawaban dicek dari posisi tiap orang di layar, bukan dari teks yang kamu tulis. justify-content: flex-end dan justify-content: end menghasilkan posisi yang sama di antrean mendatar, jadi keduanya diterima.
Selector apa saja yang dibaca?
Hanya selector satu kelas, seperti .antrean atau .ibu. Selector bertingkat seperti .antrean .ibu dan blok @media diabaikan.
Kenapa margin atau display: grid tidak berpengaruh?
Game ini hanya membaca properti flexbox, dan display hanya menerima flex. Properti lain diabaikan supaya latihannya tetap fokus ke Flexbox.
Apa beda flex-end dan end?
flex-end mengikuti arah flex, jadi di row-reverse artinya ujung kiri. end mengikuti arah tulis halaman, jadi tetap ujung kanan. Di arah bawaan keduanya sama.