CSS3Tingkat: Menengah6 min
Flexbox Layout: Tata Letak 1 Dimensi yang Fleksibel
Kuasai sistem layout Flexbox 1 dimensi untuk mengatur perataan elemen, sumbu utama (main axis), sumbu silang (cross axis), dan responsive wrapping.
Konsep Flex Container & Flex Items
Pratinjau TerbukaDengan memberikan display: flex pada kontainer induk, semua elemen anak langsung bertransformasi menjadi flex items yang fleksibel mengikuti ruang layar.
Poin Penting:
flex-direction: row (horizontal) atau column (vertikal).
justify-content: Mengatur perataan di sepanjang sumbu utama (center, space-between, space-around).
align-items: Mengatur perataan di sumbu silang (center, flex-start, flex-end, stretch).
gap: Memberikan jarak seragam antar elemen tanpa trik margin.
Pusat Elemen Sempurna (Centering)
Teknik legendaris membuat elemen tepat di tengah layar vertikal dan horizontal dengan 3 baris CSS:
.tengah-sempurna {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Live Compiler Runner
Akses Kursus Wajib Login
Buka Akses Penuh Silabus & Praktikum
Masuk dengan akun GitHub, Google, atau Akses Cepat Developer untuk membuka seluruh materi mendalam, menjalankan compiler interaktif, mengerjakan kuis, dan menyimpan progres belajar Anda.
145+ Modul Lengkap•Tersimpan Otomatis•Sertifikat Kelulusan Resmi