Penjana CSS Flexbox
Penjana CSS Flexbox visual dengan pratonton langsung. Laraskan sifat flex dan dapatkan kod CSS sedia guna.
Apakah CSS Flexbox?
CSS Flexbox ialah kaedah susun atur satu dimensi untuk menyusun item dalam baris atau lajur.
Bagaimana menggunakan penjana ini?
Laraskan sifat bekas dan item flex menggunakan kawalan. Pratonton dikemas kini secara langsung.
Bolehkah saya menambah atau mengalih keluar item flex?
Ya, gunakan butang untuk mengubah bilangan item dalam pratonton.
Bagaimana menyalin CSS yang dijana?
Klik butang "Salin CSS" untuk menyalin kod ke papan keratan.
Apakah perbezaan antara bekas flex dan item flex?
Bekas flex ialah elemen induk dengan display: flex digunakan. Item flex ialah anak langsung bekas. Sifat bekas mengawal susun atur keseluruhan, manakala sifat item mengawal tingkah laku individu.
Apakah yang dilakukan oleh justify-content?
justify-content menjajarkan item flex sepanjang paksi utama (mendatar secara lalai). Nilai termasuk flex-start, flex-end, center, space-between, space-around dan space-evenly.
Apakah yang dilakukan oleh align-items?
align-items menjajarkan item flex sepanjang paksi silang (menegak secara lalai). Nilai termasuk flex-start, flex-end, center, stretch dan baseline.
Apakah flex-wrap?
flex-wrap mengawal sama ada item flex membungkus ke berbilang baris. Nilai adalah nowrap (lalai), wrap dan wrap-reverse.
Apakah flex-direction?
flex-direction mentakrifkan arah paksi utama. Nilai adalah row (lalai), row-reverse, column dan column-reverse.
Bolehkah saya menggunakan ini untuk susun atur responsif?
Ya, Flexbox sangat baik untuk susun atur responsif. Anda boleh menggabungkan sifat flex dengan pertanyaan media untuk mencipta susun atur yang menyesuaikan diri dengan pelbagai saiz skrin.
Adakah alat ini percuma?
Ya, penjana CSS Flexbox ini sepenuhnya percuma. Tiada yuran tersembunyi, tidak perlu pendaftaran, dan anda boleh menggunakannya tanpa had.
Adakah ia berfungsi pada peranti mudah alih?
Ya, penjana sepenuhnya responsif dan berfungsi pada semua peranti termasuk telefon pintar, tablet, komputer riba dan komputer desktop.
Pelayar mana yang menyokong Flexbox?
Flexbox disokong oleh semua pelayar moden termasuk Chrome, Firefox, Safari, Edge dan Opera. Ia mempunyai lebih daripada 98% sokongan pelayar global.
Bolehkah saya menyimpan konfigurasi flexbox saya?
Kod CSS yang dijana boleh disalin dan disimpan ke fail anda sendiri. Walaupun alat ini tidak mempunyai ciri simpan terbina dalam, anda boleh menandakan halaman dengan tetapan semasa anda.
Cara Menggunakan Penjana CSS Flexbox
Susun atur letak Flexbox secara visual dan dapatkan CSS bersih serta-merta. Semuanya berjalan setempat dalam pelayar anda dan tiada data meninggalkan peranti anda.
- Pilih flex-direction seperti row, row-reverse, column atau column-reverse.
- Tetapkan justify-content kepada flex-start, center, space-between, space-around atau space-evenly untuk mengagihkan item sepanjang paksi utama.
- Pilih align-items — stretch, flex-start, flex-end, center atau baseline — untuk penjajaran pada paksi silang.
- Masukkan jarak dalam gap (px) dan gabungkan flex-wrap dengan align-content apabila item perlu melipat.
- Hidupkan Show Item Numbers untuk membezakan setiap anak, kemudian salin CSS yang dijana.
Setelah flex-wrap diaktifkan, ruang kosong pada paksi silang dikawal oleh align-content dan bukannya align-items — kekeliruan yang biasa berlaku.
Alat Berkaitan
- Penjana CSS Grid Penjana CSS Grid visual percuma dengan pratonton langsung. Reka susun atur grid responsif secara interaktif dan eksport kod CSS sedia produksi.
- Penjana Gradien CSS Cipta gradien CSS menakjubkan secara visual. Jana gradien linear, radial dan konikal dengan pelbagai henti warna, sudut dan kedudukan tersuai. Salin kod CSS sedia pengeluaran serta-merta.
- Penjana Box Shadow CSS Penjana box-shadow CSS dalam talian percuma. Cipta bayangan cantik secara visual dengan ofset, kabur, sebar, warna dan sisip boleh laras. Pratonton langsung dan salin kod serta-merta.
- Penjana Border Radius CSS Penjana border-radius CSS visual. Laraskan setiap sudut secara bebas dengan pratonton masa nyata dan salin kod CSS serta-merta.
- Penjana Border Radius Kreatif Penjana border radius kreatif percuma dalam talian. Seret 8 pemegang atau pilih pratetap blob untuk mencipta bentuk CSS organik dan menyalin kod dengan serta-merta.
- Penukar Warna Penukar warna dalam talian percuma. Tukar format HEX, RGB, HSL, HSV serta-merta dengan pemilih visual. 100% peribadi, berjalan dalam pelayar anda.
- Penjana Easing CSS Penjana easing CSS dalam talian percuma. Seret titik kawalan cubic-bezier pada lengkung interaktif, pilih dari 18 pratetap, lihat pratonton bola berulang dan salin fungsi pengmasaan serta-merta.
- Penjana Text Shadow CSS Penjana text-shadow CSS dalam talian percuma. Tindih beberapa lapisan bayang dengan ofset, kabur, warna dan kelegapan, cuba pratetap Neon, 3D, Retro dan salin CSS serta-merta.