Playground Flexbox CSS

Generator flexbox visual yang menulis CSS untuk Anda

Generator flexbox ini mengubah CSS Flexible Box Layout menjadi sesuatu yang bisa Anda lihat langsung. Alih-alih menebak-nebak apa yang akan dilakukan justify-content atau align-items, Anda cukup mengatur setiap properti pada kontrol berlabel dan melihat pratinjau langsung berubah susunan secara instan — lalu salin kode yang bersih dan siap produksi. Semuanya berjalan sepenuhnya di browser Anda, tanpa perlu daftar dan tanpa ada yang diunggah.

Ini adalah flexbox playground sejati: flex container sungguhan dengan child item yang bisa diedit, kontrol container dan per-item yang lengkap, container bersarang, pratinjau responsif yang bisa diubah ukurannya, dan URL yang bisa dibagikan. Baik Anda sedang belajar flexbox atau ingin cepat membangun navbar, baris kartu, atau hero yang di-center, Anda bisa mendapatkan layout yang persis Anda inginkan — beserta kode CSS, Tailwind, atau Bootstrap yang sesuai — dalam hitungan detik.

Semua properti container, dengan pratinjau langsung

Kendalikan container persis seperti yang diatur spesifikasinya. Atur flex-direction (row, row-reverse, column, column-reverse) untuk memilih main axis, justify-content untuk memberi jarak antar item di sepanjang sumbu itu, dan align-items untuk menyelaraskannya pada cross axis. Aktifkan flex-wrap agar item bisa mengalir ke baris baru, gunakan align-content untuk memberi jarak antar baris yang wrap tersebut, dan atur nilai row dan column gap secara independen.

Legenda sumbu bawaan menunjukkan arah mana yang menjadi main axis dan mana yang menjadi cross axis saat Anda mengubah flex-direction, sehingga hubungan antara justify-content dan align-items akhirnya benar-benar dipahami. Ini adalah cheat sheet flexbox praktis yang Anda pelajari sambil mempraktikkannya langsung.

Kontrol per-item: grow, shrink, basis, order, dan align-self

Kebanyakan generator berhenti di level container saja. Yang ini memungkinkan Anda mengklik item mana pun di pratinjau dan mengeditnya secara individual: atur flex-grow, flex-shrink, dan flex-basis (shorthand flex), timpa align-self-nya, dan ubah order-nya untuk mengubah posisinya tanpa menyentuh HTML. Tambah atau kurangi item untuk menguji bagaimana ruang didistribusikan ulang.

Ini membuatnya mudah untuk membangun pola nyata — sidebar tetap di samping kolom utama yang fleksibel (flex: 0 0 240px berdampingan dengan flex: 1), satu item yang di-center, atau tautan footer yang didorong ke ujung dengan margin-left: auto.

Flexbox bersarang dan pratinjau responsif

Layout nyata sering bersarang. Item mana pun bisa menjadi nested flex container-nya sendiri dengan pengaturan direction, justify, dan align sendiri — persis apa yang dibutuhkan generator flexbox bersarang untuk kartu yang memuat baris header di atas body, atau toolbar di dalam toolbar. Kode yang dihasilkan juga mencakup aturan bersarang tersebut.

Karena flexbox berkaitan dengan perilaku responsif, pratinjaunya bisa diubah ukurannya: seret handle-nya atau pilih preset lebar Mobile / Tablet / Desktop dan lihat item wrap serta menyusun ulang di setiap ukuran. Ini cara tercepat untuk memastikan layout flexbox responsif Anda berperilaku benar sebelum dirilis.

Salin sebagai CSS, Tailwind, atau Bootstrap — dan perbandingan dengan alat lain

Beralih ke tab output untuk mendapatkan format yang dipakai proyek Anda. CSS memberi Anda aturan .container dan per-item yang bersih menggunakan shorthand flex. Tailwind menulis class utility — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — dalam cuplikan HTML siap tempel. Bootstrap menghasilkan class utility d-flex yang setara. Hanya properti yang benar-benar Anda ubah yang ditampilkan, sehingga output tetap minimal dan mudah dibaca alih-alih mengulang setiap nilai default.

Generator visual lain seperti Flexbox.help dan generator flexbox milik Loading.io memberi Anda properti container tetapi melewatkan kontrol per-item dan container bersarang. Playground online Tailwind tidak menghasilkan CSS murni (vanilla). Alat ini mendukung ketiga format output, menangani nesting, dan tetap berjalan secara offline setelah dimuat — tanpa akun, tanpa biaya, tanpa data yang meninggalkan browser Anda.

Model mental dua sumbu: main axis, cross axis, dan mengapa justify vs align membingungkan semua orang

Flexbox beroperasi pada dua sumbu yang saling tegak lurus. Main axis adalah arah penempatan flex item — ditentukan oleh flex-direction. Dengan flex-direction: row (default), main axis berjalan dari kiri ke kanan. Dengan flex-direction: column, main axis berjalan dari atas ke bawah. Cross axis selalu tegak lurus terhadapnya: vertikal ketika main axis horizontal, horizontal ketika main axis vertikal.

Alasan justify-content dan align-items sering membingungkan developer adalah karena namanya terasa acak sampai Anda mengaitkannya dengan sumbu-sumbunya. justify-content selalu mengendalikan main axis — ia mendistribusikan ruang ekstra di sepanjang arah item mengalir. align-items selalu mengendalikan cross axis — ia menentukan bagaimana item diposisikan pada dimensi yang tegak lurus tersebut. Ubah flex-direction menjadi column dan kedua properti ini secara visual bertukar peran, karena sumbunya sudah bertukar, tetapi aturannya tidak berubah: justify = main, align = cross.

Ada juga align-content, yang hanya aktif ketika flex-wrap: wrap menghasilkan beberapa baris. Properti ini mengatur bagaimana baris-baris tersebut diberi jarak pada cross axis, sementara align-items menangani penyelarasan item individual di dalam setiap baris. Dengan mengingat model sumbu ini — gambar panah horizontal dan panah vertikal, beri label 'main' dan 'cross' berdasarkan flex-direction, lalu tentukan justify dan align sesuai itu — hampir semua bug kebingungan properti flexbox bisa dihilangkan.

Membedah shorthand flex: flex: 1, flex: auto, dan flex: none itu berbeda

Shorthand flex memuat tiga nilai: flex-grow, flex-shrink, dan flex-basis. flex-basis adalah ukuran hipotetis item sebelum ruang bebas didistribusikan — anggap saja sebagai titik awal. flex-grow adalah rasio yang mengatur seberapa besar sebuah item melebar untuk mengisi ruang sisa; 0 berarti tidak pernah membesar, 1 berarti mengambil porsi secara proporsional. flex-shrink mencerminkan hal yang sama untuk kasus overflow: 1 mengizinkan item mengecil, 0 menguncinya pada basis-nya bahkan jika container terlalu kecil.

flex: 1 setara dengan 1 1 0%. Kuncinya ada pada basis 0% tersebut: semua item mulai dengan ukuran intrinsik nol, sehingga ruang bebas dibagi murni berdasarkan rasio grow-nya — setiap item flex: 1 berakhir pada lebar yang persis sama terlepas dari kontennya. flex: auto setara dengan 1 1 auto. Di sini basis-nya adalah auto, artinya lebar konten setiap item diperhitungkan lebih dulu, dan hanya sisa ruangnya yang dibagi. Item pendek dan item panjang dengan flex: auto yang sama tidak akan memiliki lebar yang sama. flex: none adalah 0 0 auto: item tidak membesar maupun mengecil, tetap pada ukuran aslinya apa pun yang terjadi.

Dalam praktiknya, perbedaan ini terus-menerus penting. Tab navigasi berlebar sama menginginkan flex: 1 (pembagian sama rata, konten diabaikan). Daftar tag yang harus overflow secara wajar menginginkan flex: none pada setiap tag. Formulir dengan label tetap dan input yang bisa melebar memakai flex: 0 0 120px pada label dan flex: 1 pada input. Memahami ketiga sub-properti ini secara individual — alih-alih menghafal nilai shorthand — membuat Anda mudah menalar masalah ukuran apa pun.

Pola layout Flexbox umum yang wajib dihafal

Perfect centering adalah teknik flexbox yang paling banyak dicari: atur display: flex; justify-content: center; align-items: center; pada container, beri tinggi (seperti min-height: 100vh untuk full-screen), dan child akan berada persis di tengah apa pun ukurannya. Ini berfungsi untuk modal, bagian hero, loading spinner, dan ilustrasi empty-state. Sebelum ada flexbox, ini membutuhkan kombinasi absolute positioning dan margin negatif; sekarang cukup dua deklarasi.

Sticky footer membutuhkan halaman yang mengisi setidaknya tinggi viewport dan konten utama yang melebar untuk mendorong footer ke bawah. Bungkus halaman dengan display: flex; flex-direction: column; min-height: 100vh; dan beri area konten utama flex: 1 — ia melebar mengisi seluruh sisa ruang vertikal sehingga footer selalu berada di bawah bahkan pada halaman pendek. Kolom dengan tinggi yang sama didapat secara gratis: karena flex item pada baris yang sama meregang mengikuti sibling tertinggi secara default (align-items: stretch), layout kartu multi-kolom memiliki tinggi kolom yang seragam tanpa perlu JavaScript. Navbar dengan logo di kiri dan tautan di kanan memakai justify-content: space-between pada baris flex, atau cukup menaruh margin-left: auto pada grup tautan untuk mendorongnya ke ujung — trik yang ampuh karena margin auto dalam flexbox mengonsumsi semua ruang bebas yang tersedia sebelum item diposisikan.

Grid kartu dengan flex-wrap menggabungkan flex-wrap: wrap pada container dengan flex: 1 1 280px pada setiap kartu — kartu mengisi satu baris dan wrap ketika sudah tidak muat lagi pada 280 px. Ini adalah alternatif yang bersih untuk CSS Grid pada konten yang panjangnya tidak diketahui, dan tampil baik di layar sempit karena kartu wrap secara alami alih-alih overflow. Memakai gap alih-alih margin menghindari masalah klasik 'celah baris terakhir' yang disebabkan margin ketika baris berakhir di tengah.

Aksesibilitas: kapan properti order merusak pembaca layar dan navigasi keyboard

Properti order pada flexbox dan nilai flex-direction: row-reverse / column-reverse mengubah bagaimana item tampil secara visual tanpa menyentuh urutan sumber HTML yang mendasarinya. Browser menggambarnya dalam urutan yang berbeda, tetapi teknologi bantu dan navigasi keyboard mengikuti urutan DOM, bukan urutan visual. Pengguna mouse yang bisa melihat akan melihat Tab 3, Tab 1, Tab 2; pengguna pembaca layar akan mendengar Tab 1, Tab 2, Tab 3; pengguna keyboard yang menekan Tab akan berpindah melalui elemen sesuai urutan DOM, yang mungkin melompati apa yang tampak berdekatan secara visual.

WCAG Success Criterion 1.3.2 (Meaningful Sequence) mensyaratkan bahwa ketika urutan konten memengaruhi makna, urutan baca yang benar harus bisa ditentukan secara terprogram — yang berarti harus tercermin di dalam DOM. Mengurutkan ulang item murni dengan CSS melanggar aturan ini ketika urutannya bermakna (navigasi, alur langkah demi langkah, tabel data). Dokumentasi MDN untuk order secara eksplisit memperingatkan: 'Jangan gunakan order untuk apa pun yang bisa memengaruhi cara pembaca layar membacanya.' Pendekatan yang aman adalah mengurutkan ulang item di sumber HTML kapan pun urutannya penting, dan menyimpan properti CSS order hanya untuk pergeseran visual yang murni dekoratif, di mana kontennya tetap masuk akal dalam urutan apa pun.

Pertimbangan serupa berlaku untuk flex-direction: row-reverse yang dipakai untuk layout visual kanan-ke-kiri pada halaman LTR — teks di dalam item tetap dibaca dari kiri ke kanan, menciptakan ketidakcocokan antara urutan visual dan urutan baca. Dukungan RTL yang sesungguhnya sebaiknya memakai atribut HTML dir dan properti CSS logis (margin-inline-start, padding-inline-end) alih-alih membalik flex direction. Saat mengaudit sebuah layout flexbox untuk aksesibilitas, periksa apakah ada pengurutan ulang yang bermakna, pastikan urutan tab keyboard bergerak dalam urutan visual yang logis, dan verifikasi bahwa tidak ada konten penting yang terlewat atau tidak sesuai urutan bagi pengguna yang mengandalkan navigasi berurutan.