Apa itu Generator CSS Flexbox?

Generator CSS Flexbox adalah alat visual yang membantu Anda membangun tata letak Flexbox tanpa menulis kode dari awal. Alih-alih menghafal nama dan nilai properti, Anda cukup mengklik tombol dan menyesuaikan kontrol untuk melihat perubahan tata letak secara real-time.

Sempurna untuk belajar: Bereksperimen secara visual dan segera lihat hasilnya, sehingga mudah menemukan tata letak yang tepat. Setelah puas, salin kode CSS yang dihasilkan langsung ke proyek Anda.

Mengapa Menggunakan Pembuat Flexbox Visual?

Flexbox adalah salah satu sistem tata letak CSS paling powerful, tetapi memiliki kurva pembelajaran. Dengan properti seperti justify-content, align-items, flex-wrap, dan kontrol item individual seperti flex-grow dan align-self, sulit untuk mengingat apa yang dilakukan setiap nilai.

Untuk Siapa Ini?

Pemula

Belajar CSS Flexbox yang ingin memahami bagaimana setiap properti mempengaruhi tata letak

Pengembang

Yang perlu membuat prototipe tata letak Flexbox dengan cepat dan mendapatkan kode yang bersih

Desainer

Yang ingin bereksperimen dengan tata letak sebelum menyerahkan kepada pengembang

Cara Menggunakan

Konfigurasi Container

Gunakan bagian Container di panel kiri untuk mengatur properti flex parent:

flex-direction — Pilih bagaimana item mengalir: row (horizontal) atau column (vertikal)
flex-wrap — Izinkan item membungkus ke baris berikutnya atau tetap di satu baris
justify-content — Selaraskan item sepanjang sumbu utama (misalnya, center, space-between)
align-items — Selaraskan item sepanjang sumbu silang (misalnya, stretch, center)
align-content — Distribusikan ruang di antara baris yang dibungkus
gap — Atur jarak antara item (row gap dan column gap)

Kelola Item

Tambah atau hapus item flex menggunakan tombol + dan x. Anda dapat memiliki hingga 12 item. Klik pada chip berwarna atau langsung pada item di pratinjau untuk memilihnya.

Sesuaikan Item Individual

Ketika item dipilih, Anda dapat menyesuaikan properti individualnya:

order, flex-grow, flex-shrink, flex-basis — Kontrol ukuran dan urutan item
align-self — Timpa align-items container untuk item spesifik ini
width, height, padding — Atur dimensi eksplisit
background, border-radius — Gaya item secara visual

Salin Kode

Kode CSS dihasilkan secara otomatis secara real-time. Hanya properti yang berbeda dari nilai default mereka yang disertakan, menjaga output tetap bersih. Klik Salin untuk menyalin kode ke clipboard Anda.

Fitur

Kontrol Container Lengkap

Konfigurasi keenam properti container Flexbox utama dengan grup tombol sederhana. Setiap opsi diberi label dengan nilai CSS-nya, sehingga Anda mempelajari sintaks sambil membangun.

Properti Item Individual

Pilih item apa pun untuk menyesuaikan perilaku flex-nya secara independen. Atur order untuk mengatur ulang item, gunakan flex-grow untuk mengontrol bagaimana ruang didistribusikan, atau timpa penyelarasan dengan align-self.

Gaya Visual Per Item

Selain properti flex, setiap item mendukung kustomisasi visual: warna latar belakang dengan pemilih warna, border-radius untuk sudut bulat, lebar/tinggi kustom, dan penyesuaian padding.

Pratinjau Langsung

Setiap perubahan memperbarui area pratinjau secara instan. Container flex ditampilkan dengan batas putus-putus, dan setiap item memiliki warna berbeda untuk identifikasi mudah. Klik item langsung di pratinjau untuk memilihnya.

Pembuatan Kode Bersih

CSS yang dihasilkan hanya mencakup properti yang berbeda dari nilai default mereka. Properti container dikelompokkan di bawah .container, dan penggantian khusus item mendapatkan .item-N selector mereka sendiri.

Ukuran Container yang Dapat Disesuaikan

Ubah lebar (persentase) dan tinggi (piksel) container pratinjau untuk mensimulasikan ukuran viewport berbeda dan menguji bagaimana tata letak Anda merespons.

Setel Ulang Cepat: Klik tombol setel ulang untuk mengembalikan semua pengaturan ke default mereka: 4 item, tidak ada properti kustom, dan container pada lebar 100% dengan tinggi 300px.

Pertanyaan yang Sering Diajukan

Apa perbedaan antara justify-content dan align-items?

justify-content mengontrol penyelarasan sepanjang sumbu utama (horizontal untuk row, vertikal untuk column). align-items mengontrol penyelarasan sepanjang sumbu silang (arah sebaliknya).

Contoh: Dalam tata letak row, justify-content menangani jarak horizontal dan align-items menangani penyelarasan vertikal.

Kapan align-content mulai berlaku?

align-content hanya berfungsi ketika flex-wrap diatur ke wrap atau wrap-reverse DAN ada beberapa baris item. Ini mengontrol bagaimana baris itu sendiri didistribusikan sepanjang sumbu silang.

Apa perbedaan antara flex-grow dan flex-basis?

flex-basis menetapkan ukuran awal item sebelum distribusi ruang. flex-grow menentukan berapa banyak ruang yang tersisa yang harus diambil item.

Contoh: Item dengan flex-basis: 100px dan flex-grow: 1 dimulai pada 100px dan berkembang untuk mengisi ruang yang tersedia.

Mengapa kode saya tidak menyertakan semua properti?

Generator hanya menampilkan properti yang berbeda dari nilai default CSS mereka. Ini menjaga kode Anda tetap bersih dan minimal.

Optimasi cerdas: Misalnya, jika flex-direction diatur ke "row" (default), itu tidak akan muncul di output.

Bisakah saya menggunakan kode yang dihasilkan langsung di proyek saya?

Ya. CSS yang dihasilkan siap produksi. Cukup salin dan terapkan nama kelas (.container, .item-1, dll.) ke elemen HTML Anda. Anda dapat mengganti nama selector untuk mencocokkan konvensi penamaan proyek Anda.