Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Generator CSS Flexbox (Visual)

WarnaPengembang

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

Properti Container

flex-direction

justify-content

align-items

flex-wrap

align-content

Berlaku hanya saat item-item berpindah ke beberapa baris.

Jarak (px)

Item

Jumlah item

Klik item di tampilan pra-visualisasi untuk mengedit propertinya.

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Generator CSS Flexbox (Visual)

Desain tata letak Flexbox secara visual dan salin CSS siap digunakan di produksi. Sesuaikan arah, penataan, penanganan baris, jarak, dan pengaturan per-item sambil tampilan pra-visualisasi diperbarui secara langsung. Tidak perlu menebak, tidak perlu mengakses Chrome DevTools — cukup pilih perilaku container yang Anda butuhkan, lihat hasilnya, dan ambil aturan yang dihasilkan.

Cara Penggunaan

Pilih sebuah flex-direction (baris, baris-balik, kolom, kolom-balik) untuk menetapkan sumbu utama.
Pilih justify-content dan align-items untuk menentukan bagaimana anak-anak menempati setiap sumbu.
Nyalakan flex-wrap jika item harus membagi ke baris baru — align-content akan muncul untuk pengaturan multi-baris.
Tetapkan gap dalam piksel untuk menjaga jarak antar item tanpa margin.
Ubah jumlah item untuk menambahkan atau menghapus anak-anak flex (1–12).
Klik item apa pun di tampilan pra-visualisasi untuk membuka editor per-item dan menyesuaikan flex-grow, flex-shrink, flex-basis, align-self, atau order.
Salin CSS yang dihasilkan dan tempatkan di dalam stylesheet Anda.

Fitur

Tampilan pra-visualisasi langsung – Lihat ulang tata letak container dan item secara langsung saat Anda mengubah properti.
Kontrol lengkap container – flex-direction, justify-content, align-items, flex-wrap, align-content, dan gap.
Pengaturan per-item – Klik item untuk mengedit flex-grow, flex-shrink, flex-basis, align-self, dan order tanpa harus mencari di devtools.
Jumlah item dinamis – Tambahkan atau hapus anak-anak flex antara 1 hingga 12 untuk mencerminkan tampilan UI Anda.
Output CSS bersih – Pilihan container dan per-item dihasilkan sebagai potongan yang rapi dan siap disalin.
Berjalan sepenuhnya di browser – Tidak perlu mengunggah, tidak perlu perjalanan jaringan; konfigurasi Anda tidak pernah meninggalkan halaman.

 Tanya Jawab Umum

Perbedaan antara justify-content dan align-items apa?

justify-content menempatkan item sepanjang sumbu utama (arah yang ditetapkan oleh flex-direction), sementara align-items menempatkan item sepanjang sumbu lintang. Mengganti flex-direction antara baris dan kolom akan membalikkan properti mana yang mengatur penempatan horizontal versus vertikal.
Kapan align-content benar-benar berlaku?

align-content hanya berpengaruh saat flex-wrap memungkinkan item membagi ke beberapa baris. Pada container flex satu baris (flex-wrap: nowrap), browser mengabaikan align-content karena hanya ada satu baris yang perlu diatur.
Apa yang dikendalikan oleh flex-grow, flex-shrink, dan flex-basis?

flex-basis adalah ukuran awal item sepanjang sumbu utama. flex-grow mendistribusikan ruang yang tersisa secara proporsional ke item-item yang memiliki nilai grow lebih dari 0. flex-shrink memungkinkan item menyusut di bawah ukuran basis saat ruang habis; nilai 0 berarti item tetap mempertahankan ukuran basisnya.
Apakah order dapat menggantikan perubahan markup HTML?

Properti order hanya mengubah posisi visual — urutan asli di DOM tetap sama. Ini memberikan fleksibilitas untuk tata letak, tetapi dapat merugikan pengguna layar jika urutan visual dan logis berbeda terlalu jauh, sehingga gunakan dengan hati-hati untuk konten yang sensitif terhadap aksesibilitas.
Apakah saya masih harus menggunakan Flexbox saat CSS Grid tersedia?

Flexbox dirancang untuk tata letak satu dimensi — baris atau kolom di mana item menyesuaikan ukuran berdasarkan konten dan ruang yang tersedia. Grid unggul dalam tata letak dua dimensi dengan jalur eksplisit. Sebagian besar antarmuka nyata menggunakan keduanya: Grid untuk struktur halaman, Flexbox untuk komponen di dalam setiap sel.