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.

Ditulis dan ditinjau oleh tim editorial BroBroGo.Terakhir diperbarui:

Pengantar CSS Flexbox untuk Tata Letak Modern

CSS Flexbox (Flexible Box Layout) adalah model tata letak satu dimensi yang dirancang untuk mendistribusikan ruang di antara item-item dalam kontainer dan menyelaraskan posisinya. Flexbox mempermudah pengaturan tata letak yang fleksibel tanpa perlu menggunakan metode lama seperti float atau perhitungan posisi manual yang rumit.

Dengan menggunakan Flexbox Generator, Anda dapat mengatur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik. Alat ini membantu desainer dan pengembang memahami bagaimana properti flexbox memengaruhi elemen secara langsung, serta mempercepat pembuatan kode CSS yang siap pakai.

Memahami Properti Kontainer Flex

Kontainer adalah elemen induk yang membungkus item-item flex. Untuk mengontrol tata letak secara keseluruhan, alat ini menyediakan beberapa input utama untuk kontainer:

  • Arah (flex-direction): Menentukan arah sumbu utama tempat item diletakkan. Pilihan yang tersedia adalah Row, Row reverse, Column, dan Column reverse.
  • Wrap (flex-wrap): Mengatur apakah item harus dipaksa berada dalam satu baris atau boleh meluncur ke baris baru. Pilihannya meliputi No wrap, Wrap, dan Wrap reverse.
  • Justify content: Mengatur perataan item di sepanjang sumbu utama. Pilihan kontrolnya adalah Start, End, Center, Space between, Space around, dan Space evenly.
  • Align items: Mengatur perataan item di sepanjang sumbu silang pada baris tunggal. Pilihan yang tersedia adalah Start, End, Center, Stretch, dan Baseline.
  • Align content: Mengatur jarak dan perataan baris-baris dalam kontainer ketika pembungkusan aktif. Pilihan kontrolnya meliputi Start, End, Center, Stretch, Space between, Space around, dan Space evenly.
  • Gap: Menentukan jarak numerik yang konsisten di antara item dan di antara baris tanpa perlu mengatur margin manual.

Mengatur Properti Item Flex Secara Individual

Selain mengatur kontainer, Anda dapat memanipulasi properti spesifik untuk setiap item guna mencapai tata letak yang lebih dinamis. Ketika tombol Tambah item diklik, item baru akan muncul (misalnya, "Item 5"). Anda dapat menyesuaikan properti berikut untuk masing-masing item:

  • Order: Nilai numerik yang menentukan urutan kemunculan item di layar tanpa mengubah struktur HTML asli.
  • Grow: Nilai numerik yang menentukan seberapa besar item akan tumbuh untuk mengisi sisa ruang kosong di dalam kontainer.
  • Shrink: Nilai numerik yang menentukan kemampuan item untuk menyusut ketika ruang kontainer lebih sempit dari ukuran dasar item.
  • Basis: Ukuran awal item sebelum ruang kosong didistribusikan. Nilai ini dapat diisi dengan angka tertentu atau diatur ke Auto.
  • Align self: Memungkinkan item individu untuk mengabaikan aturan perataan global yang ditetapkan oleh Align items pada kontainer. Pilihannya adalah Auto, Start, End, Center, Stretch, dan Baseline.

Hanya item yang mengalami perubahan properti dari nilai bawaan yang akan dibuatkan aturan CSS khususnya sendiri dalam output kode.

Interaksi Sumbu Utama dan Sumbu Silang

Salah satu konsep terpenting dalam Flexbox adalah hubungan antara sumbu utama (main axis) dan sumbu silang (cross axis).

Ketika Anda memilih Row atau Row reverse pada kontrol Arah, sumbu utama berjalan secara horizontal (kiri ke kanan atau kanan ke kiri) dan sumbu silang berjalan secara vertikal. Sebaliknya, beralih ke Column atau Column reverse akan menukar posisi kedua sumbu tersebut. Akibat pertukaran ini, fungsi Justify content (yang selalu bekerja pada sumbu utama) dan Align items (yang selalu bekerja pada sumbu silang) akan ikut berbalik arah. Memahami pergeseran sumbu ini sangat penting untuk memastikan elemen sejajar dengan benar saat beralih dari tata letak desktop ke seluler.

Peran Wrap dan Align Content pada Tata Letak Multi-Baris

Perilaku item saat ruang kontainer menyusut sangat bergantung pada properti Wrap.

Dengan memilih No wrap, semua item dipaksa untuk tetap berada dalam satu baris tunggal, bahkan jika hal itu membuat item terhimpit atau meluap keluar dari kontainer. Ketika Wrap diaktifkan, item yang ukurannya melebihi lebar kontainer akan otomatis turun ke baris berikutnya.

Setelah kontainer memiliki lebih dari satu baris, properti Align content mulai berfungsi. Properti ini tidak memiliki efek pada kontainer satu baris. Align content bertugas mengatur bagaimana ruang kosong di antara baris-baris tersebut didistribusikan, apakah baris akan dirapatkan ke atas, ke bawah, diposisikan di tengah, atau diberi jarak renggang yang merata.

Pola Tata Letak Umum yang Dapat Dibuat

Flexbox sangat ideal untuk menyelesaikan berbagai tantangan tata letak web yang umum. Beberapa pola yang dapat langsung divisualisasikan dan dihasilkan kodenya meliputi:

  • Elemen Tengah (Centering): Memosisikan elemen tepat di tengah kontainer secara horizontal dan vertikal dengan mengombinasikan Justify content ke Center dan Align items ke Center.
  • Bilah Navigasi: Menyusun logo di satu sisi dan menu di sisi lain menggunakan Space between.
  • Tumpukan: Menyusun elemen secara vertikal dengan arah Column.
  • Kartu: Membuat barisan kartu responsif yang otomatis turun ke baris baru menggunakan fitur Wrap.
  • Bilah Sisi: Mengatur tata letak kolom utama berdampingan dengan kolom samping menggunakan proporsi Grow dan Basis yang berbeda.

Pemrosesan Lokal dan Privasi Data

Keamanan data Anda sepenuhnya terjaga saat menggunakan alat ini. Tata letak Anda dibuat langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo. Semua kalkulasi visual dan pembuatan kode CSS dilakukan secara lokal pada perangkat Anda.

Pertanyaan yang Sering Diajukan (FAQ)

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.