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.