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.