Apa fungsi flex-wrap?

flex-wrap mengontrol apakah item flex tetap pada satu baris atau membungkus ke beberapa baris ketika tidak ada cukup ruang. Nilai default nowrap memaksa item ke baris tunggal dan mungkin menyusutkannya. wrap memungkinkan item mengalir ke baris baru, sementara wrap-reverse membungkusnya dalam urutan terbalik.

Playground CSS Flexbox

Q: Apa perbedaan antara justify-content dan align-items?

justify-content mengontrol perataan di sepanjang sumbu utama (horizontal secara default), sedangkan align-items mengontrol perataan di sepanjang sumbu silang (vertikal secara default). Saat Anda mengubah flex-direction menjadi column, sumbu akan bertukar: justify-content menjadi vertikal dan align-items menjadi horizontal.

Q: Bagaimana cara mengetengahkan elemen dengan Flexbox?

Untuk mengetengahkan elemen tunggal baik secara horizontal maupun vertikal dengan Flexbox, atur wadah induk ke display: flex, lalu tambahkan justify-content: center dan align-items: center. Ini adalah pengganti modern untuk trik penengahan lama yang melibatkan margin: auto, transform, atau pemosisian absolut.

Q: Apa perbedaan antara flex-grow, flex-shrink, dan flex-basis?

flex-basis menetapkan ukuran awal item sebelum ruang bebas didistribusikan. flex-grow mendefinisikan seberapa banyak ruang ekstra yang harus diserap item relatif terhadap item lain (0 berarti tidak tumbuh). flex-shrink mendefinisikan seberapa banyak item harus menyusut ketika tidak ada cukup ruang (0 berarti tidak menyusut). Pintasan flex: 1 1 auto menetapkan ketiganya sekaligus.

Q: Kapan saya harus menggunakan Flexbox vs Grid?

Gunakan Flexbox untuk tata letak satu dimensi di mana item mengalir dalam satu arah (baris tombol, navbar, daftar kartu dalam satu baris). Gunakan CSS Grid untuk tata letak dua dimensi di mana Anda perlu mengontrol baris dan kolom secara bersamaan (tata letak halaman penuh, galeri gambar, dasbor). Keduanya bersifat komplementer, bukan bersaing — banyak desain nyata menggabungkan keduanya.

Playground CSS Flexbox interaktif dengan pratinjau langsung, kontrol per item, preset (Holy Grail, Card Grid, Navbar, Modal), dan ekspor CSS satu klik. Pelajari flex-direction, justify-content, align-items, dan gap sambil bereksperimen.

Gratis digunakanTidak perlu mendaftarHasil instan

Playground CSS FlexboxCoba sekarang — gratis ▼

⚡ Tata Letak Mulai Cepat (klik untuk memuat)

▦ Pratinjau Langsung

→ sumbu utama ↓ sumbu silang 0 item tip: klik item apa pun untuk mengedit

⚙ Wadah (.flex-container)

flex-direction ?

flex-wrap ?

justify-content ?

align-items ?

align-content ?

gap 8px

8px

✦ Item Terpilih (.flex-item)

Klik sebuah item di pratinjau untuk mengedit propertinya.

📖 Lembar Contekan Cepat — pola umum

▼

Saya ingin…	Gunakan ini
Mengetengahkan satu item secara sempurna	`justify-content: center; align-items: center`
Kolom lebar sama	`flex: 1` pada setiap item
Mendorong satu item ke kanan	`margin-left: auto` pada item tersebut
Membungkus kartu di layar kecil	`flex-wrap: wrap` + `flex: 1 1 240px`
Membalikkan urutan di seluler	`flex-direction: row-reverse` di media query
Footer lengket di bawah viewport	body: `display: flex; flex-direction: column; min-height: 100vh`
Ruang merata di antara item	`justify-content: space-between`
Jangan menyusutkan satu item	`flex-shrink: 0` padanya

Hasil CSS

Hasil HTML

Embed Playground CSS Flexbox Widget

Tentang Playground CSS Flexbox

CSS Flexbox Playground adalah lingkungan pembelajaran interaktif dan penghasil kode untuk modul CSS Flexible Box Layout modern. Sesuaikan properti wadah (flex-direction, justify-content, align-items, gap) dan properti per item (flex-grow, flex-shrink, flex-basis, align-self, order) dan saksikan tata letak Anda diperbarui secara real time. Setelah Anda mendapatkan hasil yang disukai, salin CSS dan HTML yang siap tempel langsung ke proyek Anda.

Apa itu CSS Flexbox?

CSS Flexbox (Flexible Box Layout) adalah model tata letak satu dimensi yang dirancang untuk mendistribusikan ruang di sepanjang sumbu tunggal (baris atau kolom) dan meratakan item di dalam wadah. Ini menggantikan teknik lama seperti float dan trik inline-block untuk navbar, baris kartu, konten tengah, dan UI apa pun di mana elemen perlu melentur secara alami ke wadahnya. Tidak seperti CSS Grid yang bersifat dua dimensi, Flexbox unggul dalam pengaturan yang lebih sederhana di mana Anda mengontrol perataan hanya dalam satu arah pada satu waktu.

Cara Menggunakan Playground Ini

Pilih preset (opsional): Pilih Holy Grail, Card Grid, Navbar, Hero, Modal, atau Sticky Footer untuk memuat titik awal dunia nyata. Setiap preset adalah tata letak kerja lengkap yang dapat Anda pelajari atau modifikasi.
Sesuaikan properti wadah: Gunakan kontrol tersegmentasi di panel kanan untuk mengatur flex-direction, flex-wrap, justify-content, align-items, align-content, dan gap. Panggung visual akan langsung diperbarui.
Edit item individual: Klik item apa pun di pratinjau untuk memilihnya. Ganti order, flex-grow, flex-shrink, flex-basis, dan align-self secara independen dari yang lain. Item dengan pengaturan khusus ditandai dengan lencana kecil.
Tambah atau hapus item: Gunakan Tambah Item dan Hapus yang Dipilih untuk mengubah jumlah item dan melihat respons tata letaknya.
Salin kode: Bagian Kode yang Dihasilkan di bawah selalu mencerminkan tata letak Anda saat ini. Salin CSS, HTML, atau keduanya dengan satu klik.

Referensi Properti Wadah

Wadah flex adalah elemen induk dengan display: flex. Properti ini mengontrol perilaku semua anak-anaknya secara bersamaan.

Properti	Nilai	Efek
`flex-direction`	`row` · `row-reverse` · `column` · `column-reverse`	Mengatur arah sumbu utama. `row` menyusun item dari kiri ke kanan (default); `column` menumpuknya secara vertikal.
`flex-wrap`	`nowrap` · `wrap` · `wrap-reverse`	Mengontrol apakah item tetap pada satu baris atau membungkus ke beberapa baris saat ruang habis.
`justify-content`	`flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly`	Meratakan item di sepanjang sumbu utama. Mendistribusikan ruang bebas ke samping atau di antara item.
`align-items`	`stretch` · `flex-start` · `center` · `flex-end` · `baseline`	Meratakan item di sepanjang sumbu silang (tegak lurus dengan sumbu utama).
`align-content`	`stretch` · `flex-start` · `center` · `flex-end` · `space-between` · `space-around`	Meratakan baris yang terbungkus di sepanjang sumbu silang. Hanya berpengaruh saat item membungkus ke beberapa baris.
`gap`	panjang, mis. `8px`, `1rem`	Menetapkan celah di antara item flex. Menggantikan pola penspasian berbasis `margin` yang lebih lama.

Referensi Properti Item

Properti ini diterapkan pada masing-masing item flex (anak dari wadah flex) dan menimpa pengaturan default wadah hanya untuk item tersebut.

Properti	Nilai	Efek
`order`	bilangan bulat (default `0`)	Menyusun ulang item secara visual tanpa mengubah HTML. Angka yang lebih rendah muncul pertama; nilai negatif memindahkan item ke awal.
`flex-grow`	angka (default `0`)	Mendefinisikan seberapa banyak ruang bebas wadah yang harus diserap item ini relatif terhadap saudara kandungnya. `1` pada setiap item membagi ruang secara rata.
`flex-shrink`	angka (default `1`)	Mendefinisikan seberapa banyak item dapat menyusut ketika tidak ada cukup ruang. `0` berarti tidak pernah menyusut — item tetap pada ukuran yang dinyatakan.
`flex-basis`	`auto` · panjang · persentase	Menetapkan ukuran awal item sebelum ruang bebas didistribusikan. Secara efektif menetapkan ukuran sumbu utama "ideal" item.
`align-self`	`auto` · sama dengan `align-items`	Menimpa `align-items` wadah untuk satu item tunggal.

Apa Perbedaan Antara justify-content dan align-items?

justify-content mengontrol perataan di sepanjang sumbu utama, sedangkan align-items mengontrol perataan di sepanjang sumbu silang. Sumbu utama adalah arah mana pun yang ditetapkan oleh flex-direction — horizontal untuk row, vertikal untuk column. Saat Anda mengubah flex-direction dari row ke column, kedua sumbu tersebut bertukar, sehingga justify-content menjadi vertikal dan align-items menjadi horizontal. Pertukaran ini adalah salah satu sumber kebingungan yang paling umum saat mempelajari Flexbox; indikator sumbu playground di bawah pratinjau membantu memperjelas hal ini.

Bagaimana Cara Mengetengahkan Elemen dengan Flexbox?

Untuk mengetengahkan elemen tunggal secara horizontal dan vertikal:

Tiga baris:
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertikal */

Ini adalah pengganti modern untuk trik penengahan lama yang melibatkan margin: auto, transform: translate(-50%, -50%), atau position: absolute. Cobalah di playground dengan memilih preset Modal Center.

Penjelasan Preset Tata Letak Dunia Nyata

Holy Grail Layout

Tata letak halaman tiga kolom klasik: bilah sisi kiri, konten utama, bilah sisi kanan — dengan header dan footer. Secara historis sangat sulit dibangun dengan float; Flexbox membuatnya sangat mudah. Kolom tengah menggunakan flex: 1 sehingga menyerap semua sisa ruang horizontal sementara kolom samping tetap pada lebar yang dinyatakan.

Card Grid

Baris kartu yang membungkus ke baris baru saat viewport menyempit. Menggunakan flex-wrap: wrap dengan setiap kartu diberi flex: 1 1 240px, yang berarti kartu tumbuh dan menyusut tetapi tidak pernah lebih sempit dari 240px.

Navbar

Bilah navigasi horizontal dengan logo di kiri dan tautan di kanan. Triknya adalah justify-content: space-between dengan grup logo dan tautan sebagai dua anak, ditambah wadah flex internal untuk tautan itu sendiri.

Hero Section

Tumpukan vertikal dengan konten yang ditengah baik secara horizontal maupun vertikal — cocok untuk area hero halaman arahan (landing page). Menggunakan flex-direction: column, justify-content: center, dan align-items: center pada wadah yang tinggi.

Modal Center

Dialog modal yang ditengah secara sempurna di dalam overlay-nya. Resep penengahan tiga baris yang sama seperti di atas diterapkan pada wadah overlay layar penuh.

Sticky Footer

Footer yang berada di bagian bawah viewport saat konten sedikit, tetapi terdorong ke bawah saat konten panjang. Dicapai dengan memberikan body display: flex; flex-direction: column; min-height: 100vh dan konten utama flex: 1.

Apa Perbedaan Antara flex-grow, flex-shrink, dan flex-basis?

Ketiga properti ini (digabungkan ke dalam pintasan flex) menjelaskan bagaimana sebuah item menangani ruang:

flex-basis menetapkan ukuran ideal item sebelum ada ruang bebas yang didistribusikan. Anggap saja sebagai "titik awal" item.
flex-grow berarti "jika ada sisa ruang, ambil bagian ini." Nilai 0 berarti menolak untuk tumbuh; 1 berarti tumbuh secara proporsional; 2 berarti mengambil bagian dua kali lipat dari item dengan nilai 1.
flex-shrink berarti "jika tidak ada cukup ruang, susutkan sebanyak bagian ini." Defaultnya adalah 1 (menyusut secara proporsional); 0 berarti menolak untuk menyusut.

Pintasan flex: 1 meluas ke flex: 1 1 0% — tumbuh rata, susut rata, basis nol — yang berarti semua item mengambil bagian wadah yang sama terlepas dari kontennya. flex: auto meluas ke flex: 1 1 auto, yang menghormati ukuran konten sebagai basisnya.

Kapan Saya Harus Menggunakan Flexbox vs Grid?

Gunakan Flexbox untuk tata letak satu dimensi di mana item mengalir dalam satu arah — baris tombol, navbar, kolom tunggal kartu. Flexbox sadar konten dan sangat bagus ketika Anda ingin item mengatur ukurannya sendiri.

Gunakan CSS Grid untuk tata letak dua dimensi di mana Anda perlu mengontrol baris dan kolom secara bersamaan — tata letak halaman penuh, galeri gambar, dasbor. Grid sadar tata letak dan memungkinkan Anda menempatkan item ke dalam trek yang diberi nama.

Keduanya saling melengkapi, bukan bersaing. Banyak desain nyata menggabungkannya: tata letak halaman Grid dengan navbar dan baris kartu Flexbox di dalamnya.

Tips untuk Menguasai Flexbox

Visualisasikan sumbu. Selalu ketahui arah mana yang merupakan "utama" (main) dan mana yang "silang" (cross) — pil sumbu di playground memperjelas hal ini secara eksplisit.
Gunakan gap alih-alih margin. Browser modern sepenuhnya mendukung gap pada wadah flex dan ini menghilangkan kebutuhan akan trik margin yang rumit pada elemen anak terakhir.
Gunakan flex: 1. Saat Anda ingin item berbagi ruang secara merata, pintasan ini hampir selalu menjadi solusi yang Anda inginkan.
min-width: 0 pada item flex. Item memiliki lebar minimum implisit berdasarkan kontennya. Jika string panjang yang tidak dapat diputus (seperti URL) membuat tata letak Anda meluap, atur min-width: 0 pada item untuk menimpanya.
Hindari lebar yang hanya menggunakan persentase. Mencampur lebar persentase dengan flex-grow dapat menghasilkan hasil yang tidak terduga. Lebih baik gunakan flex-basis dengan default yang wajar.

Dukungan Browser dan Kompatibilitas

CSS Flexbox didukung di setiap browser modern termasuk Chrome, Firefox, Safari, Edge, dan semua browser seluler utama. Properti gap dalam wadah flex mencapai dukungan browser universal pada tahun 2021. Browser lama (IE10/11) memerlukan prefiks vendor dan memiliki beberapa bug yang terdokumentasi dengan baik; untuk audiens tersebut, pertimbangkan flexbugs.

Pertanyaan yang Sering Diajukan

Mengapa item flex saya meluap dari wadahnya?

Item flex memiliki min-width: auto implisit berdasarkan kontennya. Kata-kata panjang, blok kode, atau teks yang telah diformat sebelumnya dapat memaksa item menjadi lebih lebar dari wadahnya. Perbaiki dengan mengatur min-width: 0 pada item (atau min-height: 0 untuk tata letak kolom).

Apa perbedaan antara space-between, space-around, dan space-evenly?

space-between tidak memberikan ruang di ujung dan memberikan ruang yang sama di antara item. space-around memberikan setengah celah di setiap ujung dan celah penuh di antara item. space-evenly memberikan ruang yang sama di ujung dan di antara item. Alihkan di playground untuk merasakan perbedaannya.

Dapatkah saya menganimasi properti flex?

Ya. flex-grow, flex-shrink, flex-basis, order, dan gap dapat diberi transisi. Menganimasi flex-direction, justify-content, dan align-items tidak didukung karena properti tersebut adalah nilai diskrit yang dihitung.

Apakah playground ini bekerja secara offline?

Semua perhitungan Flexbox terjadi di browser Anda menggunakan CSS asli. Setelah halaman dimuat, Anda dapat menggunakan playground tanpa koneksi internet — tidak ada panggilan API atau komputasi sisi server.

Apakah kode yang dihasilkan siap untuk produksi?

Ya. Kode CSS yang diekspor menggunakan properti standar yang didukung di setiap browser modern. HTML menggunakan nama kelas semantik (flex-container, flex-item) yang dapat Anda ubah namanya agar sesuai dengan konvensi proyek Anda.

Sumber Daya Tambahan

Kutip konten, halaman, atau alat ini sebagai:

"Playground CSS Flexbox" di https://MiniWebtool.com/id/playground-css-flexbox/ dari MiniWebtool, https://MiniWebtool.com/

oleh tim miniwebtool. Diperbarui: 25 Apr 2026