Flexbox Generator

Atur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik.

Preset
Kontainer
Arah
Wrap
Justify content
Align items
Item
Item 1
Align self
CSS
Sesuaikan kontainer dan item untuk membentuk tata letak Anda.

Tata letak Anda dibuat langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo.

Tanya Jawab

Apa perbedaan antara justify-content dan align-items?

Justify-content mengatur jarak item di sepanjang sumbu utama (main axis) — arah alur baris (row) atau kolom (column) — sedangkan align-items memosisikan item di sepanjang sumbu silang (cross axis). Jika Anda mengubah arah dari row ke column, kedua sumbu tersebut akan bertukar posisi, sehingga justify-content mulai bekerja dari atas ke bawah dan align-items dari kiri ke kanan.

Bagaimana cara kerja kontrol per item?

Pilih item berdasarkan nomornya, lalu atur seberapa besar item tersebut tumbuh untuk mengisi ruang kosong (grow), seberapa banyak ia menyusut saat ruang sempit (shrink), ukuran awalnya (basis), serta perataan sumbu silangnya sendiri (align-self). Properti order memindahkan posisi item lebih awal atau lebih lambat di layar tanpa mengubah struktur HTML. Hanya item yang Anda ubah yang akan mendapatkan aturan khususnya sendiri di kode CSS.

Kapan properti wrap dan align-content mulai berpengaruh?

Dengan menonaktifkan pembungkusan (wrap), setiap item dipaksa berada dalam satu baris tunggal dan dapat terhimpit menjadi lebih sempit. Aktifkan wrap, dan item yang tidak lagi muat akan turun ke baris berikutnya — di sinilah align-content mengambil alih untuk mengatur jarak antarbaris sebagai satu grup. Properti gap menentukan jarak antar-item dan antarbaris tanpa perlu margin.

CSS Cubic Bezier GeneratorGeser kedua handle untuk membentuk kurva easing, saksikan pergerakan titik animasi dibanding gerakan konstan, lalu salin nilai cubic-bezier().Border Radius GeneratorBulatkan setiap sudut dengan slider, buat bentuk blob organik dengan mode elips, dan salin CSS secara instan.Box Shadow GeneratorGeser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.Gradient GeneratorBuat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.CSS Grid GeneratorAtur kolom dan baris Anda, seret kursor melewati sel untuk menempatkan item, lalu salin kode CSS grid beserta HTML yang cocok dalam sekali klik.Kalkulator CSS clamp()Masukkan ukuran untuk layar kecil dan besar, lalu dapatkan nilai clamp() dinamis yang berskala mulus di antaranya — cocok untuk ukuran font, padding, margin, atau gap.Konverter WarnaKonversi warna antara HEX, RGB, HSL, HSV, CMYK, dan LAB — cukup edit satu kolom dan kolom lainnya akan langsung menyesuaikan.