Flexbox Playground

Semua alat

Bereksperimen dengan properti CSS Flexbox pada item langsung dan salin CSS tata letak yang dihasilkan.

Pratinjau Klik item untuk menyuntingnya
CSS yang dihasilkan
—

Semuanya berjalan di peramban Anda — tidak ada yang diunggah.

Wadah
12px
Item
0
Item terpilih

Tentang Flexbox Playground

Flexbox Playground adalah sandbox interaktif untuk CSS flexbox. Atur properti container — flex-direction, flex-wrap, justify-content, align-items, align-content dan gap — lalu lihat hingga 12 item aktif menyusun ulang tampilannya di pratinjau setiap kali Anda mengubah nilai. Ini adalah cara tercepat untuk benar-benar memahami fungsi setiap properti.

Setiap item bisa diedit satu per satu: klik salah satunya untuk memilih lalu sesuaikan flex-grow, flex-shrink, flex-basis, align-self dan order-nya. Melihat satu item membesar mengisi ruang kosong sementara item lain mempertahankan lebarnya mengajarkan model ukuran flex lebih cepat daripada diagram apa pun.

Playground ini menghasilkan CSS yang bersih untuk container dan setiap item dengan pengaturan non-default — salin langsung ke stylesheet Anda. Semuanya berjalan di browser Anda tanpa ada yang diunggah, dan tombol reset mengembalikan semuanya ke keadaan awal yang bersih.

Cara menggunakan Flexbox Playground

  1. Atur flex-direction, wrap, justify-content, align-items, align-content dan gap pada container.
  2. Tambah atau hapus item — antara 2 hingga 12 — agar sesuai dengan komponen nyata Anda.
  3. Klik sebuah item lalu sesuaikan grow, shrink, basis, align-self dan order-nya.
  4. Amati pratinjau langsung yang diperbarui pada setiap perubahan.
  5. Salin CSS yang dihasilkan dan tempelkan ke proyek Anda.

Pertanyaan yang sering diajukan

flex-grow membagikan ruang tersisa: item dengan grow 2 menerima dua kali lipat ruang ekstra dibanding item dengan grow 1. flex-shrink bekerja sebaliknya saat ruang terbatas. Keduanya adalah rasio antar item saudara, bukan ukuran absolut.

align-items memposisikan item sepanjang sumbu silang dalam satu baris. align-content mengatur jarak antar beberapa baris yang terbentuk akibat wrap di dalam container — efeknya baru terlihat ketika flex-wrap menghasilkan lebih dari satu baris.

Setiap item flex secara default bernilai order 0; item disusun dari order terendah ke tertinggi. Mengubah order sebuah item memindahkan tampilannya tanpa mengubah HTML — urutan DOM, dan dengan begitu urutan pembaca layar, tetap sama.

Ya. CSS yang dihasilkan mencakup aturan container ditambah selector untuk setiap item yang grow, shrink, basis, align-self atau order-nya berbeda dari default, sehingga Anda bisa menempelkan tata letak lengkap yang langsung berfungsi.

Ya — gratis, tanpa pendaftaran, dan sepenuhnya berjalan di sisi klien. Eksperimen Anda tidak pernah keluar dari tab browser.
Bagikan ini
Alat Terkait
Pembuat Tanda Tangan Email Rancang tanda tangan email HTML profesional dari 30 template, sesuaikan, dan simpan. Gratis
Ikon ke PNG Konversi Bootstrap Icons, Font Awesome, dan lainnya menjadi gambar PNG kustom — gratis, di browser Anda. Gratis
Pembuat Ikon Aplikasi Buat set ikon aplikasi lengkap yang siap untuk toko bagi App Store dan Google Play — latar belakang gradien, mesh, dan pola premium, dibuat dari logo Anda. Gratis
Generator Favicon Buat paket favicon lengkap dari logo, ikon font, atau monogram — favicon.ico, PNG modern, ikon Apple touch, ikon PWA, manifes web, dan cuplikan HTML. Gratis
Generator CSS Box Shadow Buat CSS box-shadow berlapis dengan slider langsung untuk offset, blur, spread, warna, opasitas, dan inset — pratinjau pada elemen nyata dan salin CSS siap pakai seketika. Gratis
Generator CSS Border Radius Rancang border-radius CSS secara visual dengan pratinjau langsung dan salin kode yang siap pakai. Gratis
Pencarian populer
flexbox playground generator css flexbox generator flex container alat justify-content align-items generator tata letak flex css visualisasi flexbox generator kode flexbox
Butuh bantuan?
Menemukan masalah dengan alat ini? Beri tahu tim kami.
Laporkan masalah

Tambahkan alat gratis ini ke situs web Anda sendiri — salin dan tempel kode di bawah ini.