Penjana CSS Flexbox
Taman permainan visual untuk mencipta susun atur flexbox dengan pratonton langsung
Sifat Bekas
Sifat Item
Praset Susun Atur
Pratonton Langsung
CSS Dijana
Contoh Penggunaan
Pusatkan Kandungan
Pusatkan kandungan secara mendatar dan menegak menggunakan flexbox.
Susun Atur Bar Sisi
Cipta susun atur klasik bar sisi + kandungan utama dengan flexbox.
Grid Kad
Bina grid kad responsif dengan pembalutan dan jarak sekata.
Ciri-ciri
Pratonton Visual Langsung
Lihat susun atur flexbox anda dikemas kini secara masa nyata semasa melaraskan sifat
Kod CSS Sedia Guna
Dapatkan kod CSS bersih dan sedia salin untuk bekas dan item
Praset Susun Atur
Mula pantas dengan praset susun atur biasa seperti berpusat, bar sisi dan lain-lain
Kawalan Per-Item
Konfigurasikan sifat item individu seperti order, flex-grow dan align-self
Cara Menggunakan?
Tetapkan Sifat Bekas
Pilih nilai flex-direction, justify-content, align-items, flex-wrap dan gap.
Laraskan Item
Tetapkan bilangan item dan konfigurasikan sifat individu seperti flex-grow dan order.
Salin CSS
Salin kod CSS yang dijana dan gunakan dalam projek anda.
Soalan Lazim
Apakah Penjana CSS Flexbox?
Penjana Flexbox ialah taman permainan visual di mana anda mengkonfigurasi sifat bekas flex dan item, dan melihat hasilnya serta-merta. Tidak perlu meneka lagi rupa justify-content: space-between. Laraskan, pratonton, salin CSS.
Ciri-ciri utama
Kawalan penuh ke atas sifat bekas seperti flex-direction, wrap, justify-content, align-items dan gap. Kawalan per-item untuk order, grow, shrink, basis dan align-self. Praset susun atur (berpusat, bar sisi, holy grail, navbar, grid kad, footer) untuk mula dengan satu klik.
Kes penggunaan biasa
Memusatkan kandungan secara menegak dan mendatar, membina bar navigasi, mencipta grid kad responsif dengan pembalutan, dan membina susun atur bar sisi klasik. Flexbox mengendalikan corak ini dengan anggun menggunakan CSS minimum.
Petua
Mula dengan praset dan laraskan dari situ. Gunakan gap dan bukannya margin antara item flex untuk kod yang lebih bersih. Ingat bahawa flex-wrap: wrap ialah sahabat anda untuk reka bentuk responsif.
Privasi
Semuanya berjalan dalam pelayar anda. Tiada data susun atur meninggalkan mesin anda.