Generator CSS Flexbox

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.