Geser slider, klik sebuah kotak, dan lihat kontainer flex menata ulang dirinya secara langsung, lalu salin CSS-nya persis.
Semuanya terjadi secara lokal di browser Anda. Tidak ada yang meninggalkan perangkat.
Klik sebuah kotak untuk menyetel flex individunya; klik lagi untuk membatalkan pilihan.
Belum ada kotak dipilih
Playground ini adalah kontainer flex sungguhan: tiap kontrol menulis ulang style inline panggung, dan panel CSS mencerminkan persis apa yang Anda lihat. Kuncinya adalah sumbu. flex-direction memilih sumbu utama — row berjalan kiri ke kanan, column dari atas ke bawah, varian -reverse sekadar membalik arah tulis. justify-content lalu membagi ruang kosong sepanjang sumbu utama itu, dan align-items menempatkan tiap item melintasi sumbu silang yang tegak lurus padanya. Pindahkan panggung ke column dan lihat justify dan align bertukar peran visual sementara nama propertinya tetap di tempat.
Ya, untuk flexbox ini aman di semua browser modern: gap pada kontainer flex hadir di Chrome 84, Firefox 63, dan Safari 14.1, jadi sudah lama sesuai garis Baseline. Firefox lebih dulu, Safari paling akhir — yang masih perlu iOS 13 atau Safari 13 desktop harus memakai margin, bukan gap.
Karena gap tidak dikurangkan dari basis persentase sebelum hitungan box-sizing tuntas, dan basis persen dihitung dari ukuran dalam kontainer. Dua anak dengan flex-basis: 50% ditambah gap apa pun tidak lagi muat, sehingga akhirnya satu per baris. Pakai basis seperti calc(50% - 8px), atau flex-basis: 0 dengan flex-grow, dan biarkan browser membaginya.
Tidak dengan cara yang perlu Anda khawatirkan sekarang. Safari 14.1+ menerapkan spesifikasi flexbox modern dengan setia, termasuk gap dan align-content pada baris yang wrap. Tarian prefiks -webkit-flex lama hanya relevan jika Anda menyokong iOS 9-10, dan alat ini sengaja tidak mengeluarkan output berprefiks.
Hampir selalu karena kontainer hanya punya satu baris item. align-content membagi baris flex secara utuh, dan dengan flex-wrap: nowrap hanya ada satu baris, jadi properti itu diabaikan. Set wrap ke wrap, paksa item menjadi dua baris dengan basis atau min-width, lalu kontrolnya tiba-tiba berfungsi.
Tidak. Playground ini murni CSS: posisi slider Anda diubah menjadi string stylesheet di memori dan disalin lewat clipboard. Tidak ada yang disimpan, dikirim, atau diambil, dan halaman tetap jalan tanpa jaringan.
Jika Anda baru saja memakai Generator Flexbox, langkah berikutnya yang wajar adalah Generator CSS Grid, Generator Box Shadow, Generator Border Radius, atau telusuri semua alat Alat harian.