Generator Flexbox
Pratinjau Real-time
Mengapa menggunakan generator Flexbox visual?
CSS Flexbox memiliki banyak properti yang saling berinteraksi dan kombinasinya bisa rumit. Dengan generator visual kami, Anda dapat menyesuaikan setiap properti melalui menu dropdown dan melihat layout diperbarui secara real-time.
Pratinjau Real-time
Lihat persis apa yang dilakukan layout Flexbox di setiap perubahan properti — tanpa tebak-tebakan
Properti Lengkap
flex-direction, justify-content, align-items, flex-wrap, dan gap dalam satu antarmuka
CSS Siap Pakai
Salin blok .container {} CSS yang bersih langsung ke stylesheet Anda
Buat layout Flexbox
Atur arah dan wrapping
Pilih flex-direction (baris/kolom) dan flex-wrap untuk mengontrol sumbu utama dan overflow
Sesuaikan penyelarasan item
Sesuaikan justify-content dan align-items untuk mengontrol distribusi dan penyelarasan item
Salin CSS
Klik 'Salin CSS' untuk mendapatkan blok .container CSS lengkap yang siap untuk proyek Anda
Kasus Penggunaan Flexbox
Navbar
Flexbox ideal untuk navbar horizontal dengan justifyContent:space-between untuk logo+link
Grid Kartu
Buat grid kartu responsif dengan flex-wrap:wrap dan flex-basis tetap
Pemusatan Sempurna
justifyContent:center + alignItems:center — cara termudah untuk memusatkan elemen apa pun
Layout Form
Sejajarkan label dan field form secara horizontal atau vertikal untuk form yang rapi dengan Flexbox
Praktik Terbaik Flexbox
✓ Pahami sumbu utama dan sumbu silang
justify-content mengontrol sumbu utama (baris=horizontal). align-items mengontrol sumbu silang. Berubah saat menggunakan flex-direction:column.
✓ Gunakan flex:1 untuk item yang dapat diperluas
Tambahkan flex:1 ke item flex untuk membuatnya mengisi ruang yang tersedia.
✓ Gunakan gap daripada margin
Properti gap menciptakan jarak yang merata antara item flex tanpa menambahkan margin di tepi luar.
✓ Gunakan Grid untuk layout 2D
Flexbox mengontrol satu sumbu pada satu waktu. Gunakan CSS Grid untuk layout dua dimensi.
❓ Pertanyaan yang Sering Diajukan
Kapan menggunakan Flexbox daripada CSS Grid?
Flexbox ideal untuk layout satu dimensi (navbar, kelompok tombol, baris form). CSS Grid unggul dalam layout dua dimensi di mana Anda mengontrol baris dan kolom secara bersamaan.
Apa itu flex-wrap:wrap?
Secara default, item flex dipaksa ke dalam satu baris meskipun meluap. flex-wrap:wrap memungkinkan item untuk pindah ke baris berikutnya — penting untuk layout responsif.
Apa perbedaan antara align-items dan align-content?
align-items menyelaraskan item flex pada satu baris tunggal. align-content hanya berlaku saat ada beberapa baris (flex-wrap:wrap) dan mengontrol distribusi baris dalam container.
Bagaimana cara membuat kolom dengan lebar yang sama menggunakan Flexbox?
Terapkan flex:1 ke setiap item. Memperluas mereka untuk mengisi ruang yang tersedia secara merata. Gunakan flex:0 0 33,33% untuk tepat 3 kolom yang sama terlepas dari konten.