Playground CSS Flexbox

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

1. 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.
2. 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.
3. 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.
4. Tambah atau hapus item: Gunakan Tambah Item dan Hapus yang Dipilih untuk mengubah jumlah item dan melihat respons tata letaknya.
5. 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.

Referensi Properti Item

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

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:

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

• CSS Flexible Box Layout - MDN
• CSS Flexible Box Layout Module Level 1 - Spesifikasi W3C
• CSS Flex Box Layout - Wikipedia

Alat terkait lainnya:

Peralatan untuk webmaster:

• Kalkulator BPK
• Kalkulator CPM
• Kompresor CSS
• Generator Favicon Baru
• Kalkulator Google AdSense
• Pembuat Cron Job Unggulan
• Pembuat Ekspresi Crontab Baru
• Kompresor HTML
• Pengonversi HTML ke Teks
• Pemeriksa Kepadatan Kata Kunci Baru
• Generator Tabel Markdown Unggulan
• Pembuat Tag Meta
• Penghapus Tanda Kutip Pintar Unggulan
• Generator Slug URL Unggulan
• Kalkulator Nilai Halaman
• Kalkulator Nilai Pengunjung
• Kalkulator Izin Unix (chmod) Unggulan
• Pengkode/Pendekode Entitas HTML Unggulan
• Generator Lorem Ipsum Baru
• Escape Unescape String JSON Unggulan
• Pengubah cURL ke JSON Baru
• Pemformat SQL Baru
• Pengoptimal SVG Baru
• Htaccess Redirect Generator Baru
• Pemeriksa Ukuran Crawl Googlebot Baru
• Generator Robots.txt Baru
• Generator Sitemap XML Baru
• Pemeriksa Usia Domain Baru
• Pemeriksa Open Graph Baru
• Pencarian WHOIS Baru
• Cek DNS Baru
• Pemeriksa Kecepatan Halaman Baru
• Pemeriksa Kepercayaan Domain Baru
• Pemeriksa Pengalihan Baru
• Generator Tag Hreflang Baru
• Pemeriksa Tautan Rusak Baru
• Playground CSS Flexbox Baru