Taman Permainan Flexbox

Semua alat

Bereksperimen dengan sifat CSS Flexbox pada item langsung dan salin CSS susun atur yang dijana.

Pratonton Klik item untuk menyuntingnya
CSS yang dijana
—

Semuanya berjalan dalam pelayar anda — tiada apa-apa dimuat naik.

Bekas
12px
Item
0
Item dipilih

Mengenai Taman Permainan Flexbox

Flexbox Playground ialah kotak pasir praktikal untuk CSS flexbox. Tetapkan sifat bekas — flex-direction, flex-wrap, justify-content, align-items, align-content dan gap — dan lihat sehingga 12 item langsung mengalir semula dalam pratonton apabila anda mengubah setiap nilai. Ini cara terpantas untuk memahami apa sebenarnya setiap sifat lakukan.

Item boleh disunting secara individu: klik satu untuk memilihnya dan laraskan flex-grow, flex-shrink, flex-basis, align-self dan order. Melihat satu item membesar untuk menelan ruang lapang sementara item sebelahnya kekal lebarnya mengajar model saiz flex lebih pantas daripada mana-mana gambar rajah.

Playground ini menjana CSS bersih untuk bekas dan mana-mana item dengan tetapan bukan lalai — salin terus ke helaian gaya anda. Semuanya berjalan di pelayar anda tanpa apa-apa dimuat naik, dan butang tetap semula mengembalikan anda ke keadaan bersih.

Cara menggunakan Taman Permainan Flexbox

  1. Tetapkan flex-direction, wrap, justify-content, align-items, align-content dan gap bekas.
  2. Tambah atau buang item — antara 2 hingga 12 — untuk mencerminkan komponen sebenar anda.
  3. Klik satu item dan laraskan grow, shrink, basis, align-self dan order-nya.
  4. Perhatikan pratonton langsung dikemas kini pada setiap perubahan.
  5. Salin CSS yang dijana dan tampalkannya ke dalam projek anda.

Soalan lazim

flex-grow mengagihkan ruang berbaki: item dengan grow 2 menerima dua kali ganda ruang tambahan berbanding item dengan grow 1. flex-shrink berfungsi secara terbalik apabila ruang terhad. Kedua-duanya adalah nisbah antara item sebelah, bukan saiz mutlak.

align-items meletakkan item sepanjang paksi silang dalam barisnya. align-content memberi jarak kepada berbilang baris yang dibalut dalam bekas — ia hanya memberi kesan yang kelihatan apabila flex-wrap menghasilkan lebih daripada satu baris.

Setiap item flex secara lalai bernilai order 0; item disusun daripada order terendah ke tertinggi. Menukar order sesuatu item menggerakkannya secara visual tanpa menyentuh HTML — jujukan DOM, dan seterusnya susunan pembaca skrin, kekal sama.

Ya. CSS yang dijana merangkumi peraturan bekas ditambah pemilih untuk setiap item yang grow, shrink, basis, align-self atau order-nya berbeza daripada lalai, jadi anda boleh menampal susun atur lengkap yang berfungsi.

Ya — percuma, tanpa perlu mendaftar, dan sepenuhnya berasaskan pelanggan. Eksperimen anda tidak pernah meninggalkan tab pelayar.
Kongsi ini
Alat Berkaitan
Pembina Tandatangan E-mel Reka bentuk tandatangan e-mel HTML yang profesional daripada 30 templat, sesuaikan dan simpan. Percuma
Ikon ke PNG Tukar Bootstrap Icons, Font Awesome dan lain-lain kepada imej PNG tersuai — percuma, dalam pelayar anda. Percuma
Penjana Ikon Aplikasi Jana set ikon aplikasi yang lengkap dan sedia untuk kedai bagi App Store dan Google Play — latar belakang gradien, mesh dan corak premium, dijana daripada logo anda. Percuma
Penjana Favicon Bina pakej favicon lengkap daripada logo, ikon fon atau monogram — favicon.ico, PNG moden, ikon Apple touch, ikon PWA, manifes web dan petikan HTML. Percuma
Penjana Bayang Kotak CSS Cipta bayang-kotak CSS berlapis dengan gelangsar langsung untuk ofset, blur, sebaran, warna, kelegapan dan inset — pratonton pada elemen sebenar dan salin CSS yang sedia tampal serta-merta. Percuma
Penjana Jejari Sempadan CSS Cipta border-radius CSS secara visual dengan pratonton langsung dan salin kod sedia pengeluaran. Percuma
Carian popular
taman permainan flexbox penjana css flexbox penjana bekas flex alat justify-content align-items penjana susun atur flex css pemvisual flexbox penjana kod flexbox
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.
Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.