Penjana CSS Flexbox

Bekas

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

Klik item untuk memilihnya

Klik item untuk memilih dan mengkonfigurasi sifat flex-nya.

Apakah CSS Flexbox?

CSS Flexbox (Flexible Box Layout) ialah model tataletak satu dimensi untuk mengagihkan ruang dan menjajarkan item dalam baris atau lajur. Bekas flex ditakrifkan dengan display: flex, dan anak langsungnya menjadi item flex. Sifat utama bekas: flex-direction (baris atau lajur), flex-wrap (satu vs. berbilang baris), justify-content (penjajaran paksi utama), align-items (penjajaran paksi silang setiap baris) dan align-content (penjajaran paksi silang berbilang baris). Sifat utama item: flex-grow (sejauh mana item berkembang), flex-shrink (sejauh mana ia mengecut), flex-basis (saiz awal) dan align-self (menggantikan align-items bekas untuk item tertentu). Flexbox sesuai untuk bar navigasi, baris kad, tataletak berpusat dan sebarang susunan satu dimensi.

Cara Menggunakan Penjana CSS Flexbox

Laraskan sifat bekas (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) menggunakan senarai juntai bawah dan input.
Klik mana-mana item dalam pratonton untuk memilihnya (bertukar kepada warna oren).
Tetapkan flex-grow, flex-shrink, flex-basis dan align-self item yang dipilih dalam panel item.
Klik '+ Tambah Item' untuk menambah lebih banyak item; klik 'Buang' untuk memadam item yang dipilih.
Tukar antara tab CSS dan HTML untuk melihat kod yang dijana, kemudian klik Salin.
Klik 'Tetapkan Semula Semua' untuk memulakan semula dengan tataletak lalai 3 item.