Apa itu CSS Flexbox?
CSS Flexbox (Flexible Box Layout) adalah model tata letak satu dimensi untuk mendistribusikan ruang dan menyelaraskan item dalam baris atau kolom. Kontainer flex didefinisikan dengan display: flex, dan anak langsungnya menjadi item flex. Properti kunci kontainer: flex-direction (baris atau kolom), flex-wrap (satu vs. banyak baris), justify-content (penyelarasan sumbu utama), align-items (penyelarasan sumbu silang per baris), dan align-content (penyelarasan sumbu silang beberapa baris). Properti kunci item: flex-grow (seberapa besar item tumbuh), flex-shrink (seberapa besar item menyusut), flex-basis (ukuran awal), dan align-self (mengganti align-items kontainer untuk item tertentu). Flexbox ideal untuk bilah navigasi, baris kartu, tata letak terpusat, dan susunan satu dimensi apa pun.
Cara Menggunakan Generator CSS Flexbox
-
Sesuaikan properti kontainer (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) menggunakan dropdown dan input.
-
Klik item mana pun di pratinjau untuk memilihnya (berubah menjadi oranye).
-
Atur flex-grow, flex-shrink, flex-basis, dan align-self item yang dipilih di panel item.
-
Klik '+ Tambah Item' untuk menambah item; klik 'Hapus' untuk menghapus item yang dipilih.
-
Beralih antara tab CSS dan HTML untuk melihat kode yang dibuat, lalu klik Salin.
-
Klik 'Atur Ulang Semua' untuk memulai dari awal dengan tata letak default 3 item.