Generator CSS Flexbox

Generator CSS Flexbox yang memperlihatkan ruang tersisa

Kontainer di panggung Generator CSS Flexbox ini adalah kotak display: flex yang sungguhan. Ubah arah, pembungkusan, perataan, dan jarak pada elemen induk, dan item langsung bergeser di tempatnya. Seret pegangan di sudut untuk mengubah lebar dan tinggi, maka terlihat kapan item pindah ke baris berikutnya dan kapan item menyusut. Garis bantu menunjukkan arah sumbu utama dan sumbu silang dengan anak panah, gap dengan batang tebal, dan ruang tersisa yang tidak dipakai item dengan arsiran dan angka. Jika item keluar dari kontainer, panjang yang meluap ditandai dengan arsiran merah.

Pilih satu item lalu ubah nilai seperti flex: 1, auto, atau none. Kartu Rincian ukuran di bawah akan memperlihatkan bagaimana ruang tersisa dibagi, mengikuti urutan perhitungan dalam spesifikasi CSS Flexbox (§9.7). Hasil hitungan itu dicocokkan dengan ukuran yang benar-benar digambar peramban Anda, dengan selisih maksimal 1px. Jika tata letak sudah sesuai, salin CSS dan HTML-nya, atau gunakan Salin tautan untuk menyimpan kondisi saat ini di dalam alamat.

Kapan memakai Flexbox, dan beda dengan Grid

Flexbox menata item dalam satu arah dan membagi ruang di dalam baris itu. Walaupun dibungkus menjadi beberapa baris, ruang dihitung terpisah untuk tiap baris, sehingga batas kolom antarbaris tidak selalu sejajar. Untuk tata letak seperti tabel yang perlu menyelaraskan baris dan kolom sekaligus, CSS Grid lebih cocok.

• Menu dan kelompok tombol: dipakai saat item dengan panjang berbeda-beda ditaruh dalam satu baris dan jaraknya diatur dengan gap. Untuk mendorong hanya satu item ke ujung, beri margin auto (contoh 'Bilah navigasi').
• Perataan tengah horizontal dan vertikal: dipakai saat satu konten harus tepat di tengah tinggi elemen induk, tanpa menghitung posisinya secara terpisah.
• Kolom isian + tombol, bilah samping + isi: dipakai saat satu sisi berukuran tetap dan sisi lain mengambil seluruh ruang yang tersisa (flex: 0 0 120px dan flex: 1 1 0).
• Footer di bagian bawah: pada arah vertikal, beri flex-grow pada bagian isi, maka footer tetap menempel di bawah walaupun isinya pendek.
• Daftar tag atau chip: dipakai saat pembungkusan dinyalakan dan item mengalir sesuai panjang isinya. Jika lebar kolom harus sama di semua baris, seperti pada kartu, pertimbangkan Grid. Pada contoh 'Kartu yang memanjang', kartu di baris terakhir menjadi lebih lebar karena ruang dibagi terpisah untuk tiap baris.

Cara memakai

1. Pilih titik awal. Klik salah satu dari 12 contoh tata letak, maka pengaturan induk, pengaturan item, dan ukuran kontainer berubah sekaligus. Di layar lebar, panggung menempel di bagian atas layar dan ikut bergeser saat menggulir, sehingga hasil tiap contoh bisa langsung dibandingkan.
2. Atur induknya. Pilih arah dan pembungkusan lebih dulu, lalu ubah perataan sumbu utama dan sumbu silang. Ikon perataan berputar mengikuti arah saat ini, jadi arah gerak batang di dalam ikon sama dengan arah gerak item yang sebenarnya.
3. Seret ukurannya. Persempit kontainer dengan pegangan di kanan bawah panggung untuk menemukan titik terjadinya pembungkusan dan penyusutan. Saat pegangan difokuskan, tombol panah mengubah ukuran 10px, bersama Shift 50px, dan tombol Home menyesuaikan lebar dengan panggung.
4. Rapikan itemnya. Pilih item di panggung atau lewat tombol nomor, lalu ubah teks, nilai flex, urutan, align-self, dan margin auto. Di kartu Rincian ukuran, periksa berapa banyak ruang tersisa yang diterima item itu.
5. Salin. Gunakan 'Salin CSS' dan 'Salin HTML' untuk membawa kodenya. Kode biasa hanya memuat properti tata letak yang berbeda dari nilai bawaan. Jika 'Sertakan dekorasi pratinjau' dinyalakan, ukuran, jarak, dan border yang sama dengan panggung ikut disertakan, sehingga tampilannya bisa ditiru persis di tempat Anda menempelkannya.

Sumbu utama dan sumbu silang

Sumbu utama adalah arah item berjajar, sedangkan sumbu silang tegak lurus terhadapnya. justify-content menggerakkan item di sumbu utama, dan align-items, align-self, serta align-content menggerakkannya di sumbu silang. Pada layar dengan tulisan horizontal dari kiri ke kanan, keempat arah itu adalah sebagai berikut.

flex-wrap: wrap-reverse menukar awal dan akhir sumbu silang. Karena itu, pada row dengan wrap-reverse, baris bertumpuk dari bawah ke atas, dan align-items: flex-start pun menempel di sisi bawah baris. Pada dokumen yang ditulis dari kanan ke kiri (direction: rtl) atau tulisan vertikal, sisi awal berubah lagi, jadi mengingat flex-start selalu sebagai 'kiri' mudah menyesatkan.

justify-content membagi ruang tersisa

justify-content menentukan di mana ruang yang masih tersisa di sumbu utama diletakkan, setelah ukuran item dan jarak dikurangkan semuanya. Jika tidak ada ruang tersisa, mengganti nilainya tidak menggerakkan apa pun. Tabel di bawah menunjukkan hasilnya untuk lebar dalam 400px dengan 3 item berukuran 80px tanpa gap, sehingga ruang tersisanya 160px.

space-around memberi ruang yang sama di kiri dan kanan tiap item, sehingga jarak antaritem (53,33px) dua kali jarak di kedua ujung (26,67px). space-evenly membuat jarak di kedua ujung dan jarak antaritem sama semuanya. Ketiga nilai distribusi ini beralih ke perataan cadangan saat ruang tidak bisa dibagi. CSS Box Alignment menetapkan perataan cadangan space-between sebagai safe flex-start, dan perataan cadangan space-around serta space-evenly sebagai safe center. Karena itu, jika hanya ada satu item, space-between menaruhnya di awal, sedangkan dua nilai lainnya menaruhnya di tengah. Saat item meluap, safe menjaga sisi awal, sehingga ketiganya menempel di awal (dikonfirmasi di Chromium 151).

align-items, align-self, align-content

align-items menentukan posisi tiap item di sumbu silang dalam satu baris, dan align-self mengubah nilai itu untuk satu item saja. Nilai bawaan stretch merentangkan item yang ukuran sumbu silangnya auto hingga setinggi baris. Pada tata letak horizontal, item yang diberi height langsung tidak akan direntangkan. baseline menyejajarkan garis dasar baris pertama teks pada item yang ukuran hurufnya berbeda (contoh 'Garis dasar teks sejajar').

align-content memperlakukan beberapa baris sebagai satu kelompok dan menata seluruh baris di sumbu silang. Nilai bawaan normal berperilaku seperti stretch pada kontainer flex, yaitu merentangkan baris untuk mengisi ruang tersisa. Spesifikasi menyatakan properti ini tidak berpengaruh pada kontainer flex satu baris (single-line), sehingga pada flex-wrap: nowrap nilai apa pun tidak mengubah apa-apa. Sebaliknya, pada wrap properti ini berlaku walaupun baris sebenarnya hanya satu. Di Chromium 151, pada kontainer setinggi 100px dengan satu baris item 20px dan align-content: center, hasilnya tetap menempel di atas pada nowrap, dan turun 40px ke tengah pada wrap.

Singkatan flex: initial, auto, none, 1

flex adalah properti yang menuliskan flex-grow, flex-shrink, dan flex-basis sekaligus. Empat nilai yang diperkenalkan spesifikasi sebagai nilai yang sering dipakai ada di bawah, dan menulis satu angka saja seperti flex: 1 membuat flex-basis bernilai 0. Dua kolom di kanan adalah hasil dua item dengan lebar isi 100px dan 300px di kontainer berlebar dalam 600px dan 300px.

Beda flex: auto dan flex: 1 ada di titik awalnya. auto menambahkan sisa 200 separuh-separuh ke ukuran isi (100 dan 300), sehingga item yang panjang tetap lebih lebar. 1 mulai dari 0 dan membagi 600 separuh-separuh, sehingga kedua item sama lebar. Tabel dihitung dengan item tanpa padding dan border, serta lebar minimum isi yang cukup kecil. Jika ada kata panjang sehingga lebar minimumnya lebih besar daripada bagian yang diterima, item itu berhenti di lebar minimumnya, dan item lain membagi ulang sisa ruangnya.

flex-grow adalah rasio pembagian ruang tersisa

flex-grow bukan rasio ukuran akhir, melainkan rasio pembagian ruang tersisa. Di bawah ini hasil dua item di dalam lebar dalam 500px.

grow 1 : 2 hanya membagi sisa 300px menjadi 100 dan 200, sehingga lebar akhirnya 200 : 300. Agar lebar akhir tepat 1 : 2, seperti pada baris terakhir, ukuran dasar harus 0 (flex: 1 dan flex: 2) item tidak boleh memiliki padding maupun border, dan lebar minimum isi tidak boleh ikut menahan. Jika ada padding dan border 30px seperti item di panggung alat ini, perhitungan dimulai dari 30px itu, sehingga flex: 1 dan flex: 2 pun tidak tepat 1 : 2. Jika jumlah grow item yang tumbuh kurang dari 1, spesifikasi hanya membagikan ruang tersisa dikalikan jumlah itu. Karena 0,25 + 0,25 = 0,5, hanya setengah dari 300px, yaitu 150px, yang dibagikan, dan 150px sisanya ditata oleh justify-content.

flex-shrink menyusutkan sebanding dengan ukuran dasar

Saat ruang kurang, besar penyusutan dibagi menurut rasio nilai shrink dikalikan ukuran dasar bagian dalam. Ukuran dasar bagian dalam adalah ukuran dasar dikurangi padding dan border. Karena itu item yang besar menyusut lebih banyak, dan walaupun nilai shrink sama, panjang penyusutannya berbeda. Di bawah ini kasus dengan lebar dalam 300px yang kurang 100px.

Baris terakhir adalah kasus box-sizing: border-box dengan padding dan border kiri-kanan yang totalnya 40px. Rasio penyusutan ditentukan oleh ukuran dasar bagian dalam 60 : 260, sehingga hasilnya berbeda dari kasus tanpa padding (75 · 225). Kartu Rincian ukuran di generator ini menuliskan hitungan itu apa adanya, misalnya 'dari 100 yang kurang, (1 × 60) / 320'. Aturan yang sama dengan grow berlaku jika total shrink kurang dari 1. Pada lebar dalam 300px, dua item 200px dengan shrink 0,2 masing-masing berjumlah 0,4, sehingga hanya 40% dari 100px yang kurang, yaitu 40px, yang dikurangkan: keduanya menjadi 180 · 180 dan 60px sisanya meluap.

Item yang tidak mau menyusut: min-width: auto

Walaupun flex-shrink bernilai 1, item tidak menjadi lebih kecil daripada lebar minimum isinya. Pada item flex yang bukan kontainer gulir, nilai bawaan min-width (atau min-height pada arah vertikal), yaitu auto, dihitung sebagai 'ukuran minimum berdasarkan isi' (spesifikasi §4.5). Karena itu alamat panjang tanpa tempat untuk pindah baris, teks dengan white-space: nowrap, dan gambar yang ukuran aslinya besar menembus kontainer dan meluap. Pada contoh 'Alamat panjang yang tak menyusut', arsiran merah di sisi kanan panggung adalah panjang yang meluap.

• Jika item itu diberi min-width: 0, ia bisa menyusut lebih kecil daripada isinya. Namun teks tidak otomatis pindah baris, jadi teks yang meluap perlu ditangani terpisah dengan overflow-wrap: anywhere atau pemotongan berelipsis.
• Jika overflow diberi nilai selain visible, seperti hidden atau auto, item itu menjadi kontainer gulir, dan ukuran minimum otomatisnya menjadi 0.
• Jika daftar yang bisa digulir ditaruh di dalam arah vertikal tetapi daftarnya hanya memanjang tanpa bisa digulir, item itu sering memerlukan min-height: 0.
• Bahasa Indonesia hanya memindahkan baris di spasi atau tanda hubung, sehingga kata panjang atau URL memperbesar lebar minimum item. Hal ini terlihat pada contoh alamat di atas. Untuk memecah kata yang terlalu panjang, gunakan overflow-wrap: anywhere, atau pasang atribut lang yang benar dan hyphens: auto agar kata dipenggal dengan tanda hubung.

Mendorong satu item dengan margin auto

Pada tata letak horizontal, jika item diberi margin-left: auto, margin itu mengambil seluruh ruang tersisa dan item terdorong ke sisi akhir. Spesifikasi menetapkan bahwa ruang tersisa yang positif lebih dulu dibagikan ke margin auto, sebelum perataan oleh justify-content dan align-self (§8.1). Karena itu, pada baris yang punya margin auto, mengubah justify-content tidak menggerakkan apa pun. Contoh 'Bilah navigasi' hanya memberi margin auto di depan item Masuk, sehingga menu lain berada di kiri dan hanya Masuk di ujung kanan. Jika auto diberikan di kedua sisi, item itu berada di tengah ruang tersisa. 'Margin auto sumbu utama' pada generator ini menuliskan ke kode margin-left, right, top, atau bottom yang sesuai dengan arah.

Saat gap dan ruang tersisa ada bersamaan

Kontainer flex menentukan ruang dengan urutan ini. Pertama, gap antaritem dikurangkan dari ukuran dalam, lalu sisanya dibagi dengan grow atau shrink. Jika masih ada ruang tersisa, margin auto yang menempatkannya, baru setelah itu justify-content. Baris pertama Rincian ukuran, 'Ukuran dalam − celah − total ukuran dasar = ruang tersisa', adalah urutan itu sendiri. Pada arah row, column-gap masuk di antara item pada baris yang sama dan row-gap di antara baris, sedangkan pada arah column keduanya berkebalikan.

gap hanya muncul di antara item dan tidak muncul antara border kontainer dan item pertama. Jarak di tepi diberikan dengan padding pada induk. Jika space-between dipakai bersama gap, jarak yang terlihat menjadi lebih lebar daripada gap, dan pada baris yang hanya berisi satu item tidak ada gap.

order dan reverse hanya mengubah urutan tampilan

order menaruh item bernilai kecil lebih dulu, dan item dengan nilai sama mengikuti urutan HTML. row-reverse dan column-reverse juga hanya membalik urutan di layar. Perpindahan dengan tombol Tab dan pembaca layar mengikuti urutan HTML, sehingga spesifikasi meminta order dipakai hanya untuk mengubah urutan visual, bukan urutan logis (§5.4), dan melarang order atau *-reverse dipakai sebagai pengganti urutan sumber yang benar (§5). Di panggung generator ini pun, tombol panah berpindah antaritem menurut urutan HTML (urutan nomor), bukan posisi di layar.

Dukungan peramban

Angka dalam tabel adalah versi pertama yang mendukung, sebagaimana tertulis di data kompatibilitas peramban MDN. Jika Anda perlu mendukung peramban lama yang belum mendukung gap pada tata letak flex, gantilah jarak dengan margin pada item.

Kesalahan yang sering terjadi

• Perataan tengah vertikal tidak berhasil. Ini terjadi ketika tinggi induk sama dengan tinggi isi, sehingga tidak ada ruang tersisa di sumbu silang. Beri induk height atau min-height.
• justify-content tidak bergerak pada column. Sumbu utama arah vertikal adalah tinggi, sehingga ruang tersisa baru ada jika tinggi induk sudah ditentukan.
• Sudah memberi flex: 1 tetapi lebarnya berbeda. Ada item yang lebar minimum isinya, karena kata panjang atau gambar, lebih besar daripada bagian yang ia terima. Pertimbangkan min-width: 0 pada item itu.
• Hanya kartu di baris terakhir yang melebar. Penyebabnya, ruang tersisa dibagi terpisah untuk tiap baris. Untuk menyamakan lebar kolom, gunakan Grid atau beri grow 0.
• Ingin menata sampai elemen cucu. display: flex hanya menjadikan anak langsung sebagai item flex. Untuk menata elemen yang lebih dalam, beri display: flex juga pada induknya.
• Dengan center, bagian awal yang meluap terpotong. Jika item meluap, center meluap ke kedua sisi, dan sisi awal tidak bisa dilihat bahkan dengan menggulir. Di Chromium 151, isi sepanjang 300px di kontainer 200px membuat item pertama keluar 50px ke depan, dan dengan justify-content: safe center item itu menempel di awal.
• Sudah mengubah urutan dengan order, tetapi urutan Tab tetap. Itu normal. Jika urutan baca juga perlu berubah, perbaiki urutan HTML.

Batasan dan hal yang perlu diperhatikan

• Panggung hanya memperlihatkan arah tulisan horizontal dari kiri ke kanan. Pada dokumen rtl atau tulisan vertikal, sisi awal berbeda.
• Di dalam item hanya bisa diisi satu rangkaian teks. Pada layar sungguhan yang berisi gambar, anak berlebar tetap, atau flex di dalamnya, lebar minimumnya akan berbeda.
• Rincian ukuran menghitung ulang spesifikasi §9.7 dengan ukuran isi (max-content dan min-content) yang diukur di peramban saat ini. Jika ada baris yang selisihnya lebih dari 1px, baris itu menampilkan nilai peramban dan memberi tahu secara terpisah.
• Jika flex-basis lebih kecil daripada padding + border dalam (misalnya 0 pada border-box), catatan spesifikasi menjelaskan ukuran dasar luarnya sebagai 0. Chromium 151 mulai menghitung dari padding + border dalam, dan alat ini memakai nilai yang sesuai dengan hasil itu.
• Ukuran maksimum (max-width dan max-height) serta margin auto sumbu silang pada align-self tidak bisa diatur.
• Kode yang disalin tidak membuat media query. Aturan yang mengubah arah menurut lebar layar harus Anda tulis sendiri.
• Salin tautan menyertakan teks item di dalam alamat. Jangan masukkan teks yang tidak boleh dilihat orang lain.

Tanggal acuan W3C CSS Flexible Box Layout Module Level 1 (Candidate Recommendation Draft 2025-10-14), CSS Box Alignment Module Level 3 (Working Draft 2026-10-08), dan data kompatibilitas peramban MDN diperiksa langsung pada sumber aslinya tanggal 2026-10-21. Angka dalam tabel dihitung dengan inti perhitungan alat ini, sedangkan perataan cadangan, align-content, dan batas bawah ukuran dasar adalah hasil pengukuran di Chromium 151.

Sumber

• 01W3C: CSS Flexible Box Layout Module Level 1Candidate Recommendation Draft 2025-10-14. §4.5 ukuran minimum otomatis, §5 dan §5.4 urutan dan aksesibilitas, §7.1.1 nilai bawaan flex (initial, auto, none, angka), §8.1 margin auto, §8.4 align-content, §9.3 pemecahan baris, §9.7 penyelesaian panjang fleksibel (shrink × ukuran dasar dalam, jumlah grow < 1)
• 02W3C: CSS Box Alignment Module Level 3Working Draft 2026-10-08. §4.3 nilai distribusi dan perataan cadangan (space-between = safe flex-start, space-around dan space-evenly = safe center), §4.4 safe dan unsafe, §5.1.3 perilaku normal pada kontainer flex
• 03MDN: Basic concepts of flexboxSumbu utama dan sumbu silang, garis awal dan garis akhir, perilaku dasar item flex
• 04MDN: flexTabel kompatibilitas peramban: tanpa awalan, Chrome 29, Firefox 22, Safari 9
• 05MDN: flex-basisTabel kompatibilitas peramban: content di Chrome 94, Firefox 61, Safari 15.4; min-content dan max-content di Chrome 94, Firefox 66, Safari 16
• 06MDN: gapTabel kompatibilitas peramban: pada tata letak flex di Chrome 84, Firefox 63, Safari 14.1
• 07MDN: orderPeringatan aksesibilitas karena urutan di layar berbeda dari urutan baca, tabel kompatibilitas peramban Chrome 29, Firefox 20, Safari 9

Pertanyaan yang sering diajukan

Alat yang dipakai bersama