CSS Visual ToolsLesson 72Preview gratis
Flexbox Playground
Lesson ini bagian dari Web Developer Tools · Semua level
Ringkasan
Flexbox playground membantu mencoba properti layout satu dimensi secara interaktif. Kamu dapat mengubah flex-direction, justify-content, align-items, gap, dan flex pada item lalu melihat hasilnya seketika. Flexbox sangat berguna untuk navigasi, deretan kartu, dan perataan konten di dalam container.
Poin kunci
- Flex container mengatur anak-anaknya pada sumbu utama dan sumbu silang
- flex-direction menentukan arah sumbu utama, misalnya row atau column
- justify-content meratakan item pada sumbu utama
- align-items meratakan item pada sumbu silang
- flex: 1 membuat item dapat tumbuh mengisi ruang yang tersisa
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.