Taman Permainan Flexbox

Semua alat pembangun Percuma

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
Ikon ke PNG
Penjana Ikon Aplikasi
Penjana Favicon
Penjana Bayang Kotak CSS
Penjana Jejari Sempadan CSS
Penjana Kecerunan CSS
Penjana Glassmorphism
Penjana Neumorphism
Bootstrap Flex Playground
Bootstrap Grid Playground
Taman Permainan Grid CSS
Penyunting Pelonggaran Cubic-Bézier
Penjana Data Palsu
Penjana Kod QR
Pengimbas Kod QR
Papan Putih Dalam Talian
Penjana Kod Bar
Pembuat Carta
Penjana UUID / ULID
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.