Penjana Flexbox

Pengenalan kepada CSS Flexbox

CSS Flexbox, atau Flexible Box Layout, ialah model reka letak satu dimensi yang direka untuk mengagihkan ruang dan menjajarkan item dalam bekas. Model ini digunakan secara meluas kerana keupayaannya untuk menguruskan saiz dan kedudukan elemen secara dinamik, walaupun saiz skrin atau dimensi peranti berubah-ubah. Melalui pendekatan visual, Penjana Flexbox membolehkan anda menetapkan bekas flex (flex container) serta item di dalamnya, melihat perubahan secara langsung, dan menyalin kod CSS yang dihasilkan untuk projek reka bentuk anda.

Memahami Sifat Bekas Flex

Bekas flex dikawal oleh beberapa sifat utama yang menentukan arah aliran, pembalutan, dan pengagihan ruang bagi semua item di dalamnya. Di dalam alat ini, anda boleh melaraskan sifat-sifat berikut:

• Arah (flex-direction): Menentukan paksi utama aliran item. Pilihan yang tersedia ialah Baris (row), Baris terbalik (row-reverse), Lajur (column), dan Lajur terbalik (column-reverse).
• Balut (flex-wrap): Mengawal sama ada item dipaksa berada dalam satu baris atau dibenarkan pecah ke baris baharu. Pilihan merangkumi Tiada balutan (nowrap), Balut (wrap), dan Balut terbalik (wrap-reverse).
• Ratakan kandungan (justify-content): Menjajarkan item di sepanjang paksi utama. Pilihan yang disediakan ialah Mula, Akhir, Tengah, Ruang di antara, Ruang di sekeliling, dan Ruang sekata.
• Jajarkan item (align-items): Menentukan jajaran item di sepanjang paksi silang. Pilihan terdiri daripada Mula, Akhir, Tengah, Regang, dan Garis asas.
• Jajarkan kandungan (align-content): Mengatur ruang antara baris dalam bekas flex apabila pembalutan diaktifkan dan terdapat ruang tambahan pada paksi silang. Pilihan yang ada ialah Mula, Akhir, Tengah, Regang, Ruang di antara, Ruang di sekeliling, dan Ruang sekata.
• Jurang (Gap): Nilai berangka yang menetapkan ruang kosong secara langsung di antara item dan di antara baris tanpa memerlukan margin luaran.

Memahami Sifat Item Flex

Setiap item di dalam bekas flex boleh mempunyai tingkah laku tersendiri yang mengatasi tetapan umum bekas. Sifat-sifat individu ini termasuk:

• Tertib (order): Nilai berangka yang menentukan urutan paparan item dalam bekas tanpa mengubah struktur HTML asal.
• Tumbuh (Grow / flex-grow): Nilai berangka yang menentukan keupayaan sesuatu item untuk membesar bagi mengisi baki ruang kosong di dalam bekas.
• Kecil (Shrink / flex-shrink): Nilai berangka yang menentukan keupayaan item untuk mengecil apabila ruang bekas menjadi terlalu sempit.
• Asas (flex-basis): Menetapkan saiz permulaan item sebelum ruang baki diagihkan. Nilai ini boleh ditetapkan sebagai nilai berangka atau Asas auto.
• Jajarkan diri (align-self): Membolehkan item individu mengatasi tetapan align-items bekas. Pilihan yang ada ialah Auto, Mula, Akhir, Tengah, Regang, dan Garis asas.

Interaksi Paksi dan Pembalutan Elemen

Hubungan antara justify-content dan align-items sangat bergantung pada paksi utama (main axis) dan paksi silang (cross axis). Apabila anda menukar arah daripada baris kepada lajur, kedua-dua paksi ini bertukar kedudukan. Kesannya, justify-content yang sebelum ini mengawal jajaran mendatar akan mula mengawal jajaran menegak, manakala align-items pula mengawal jajaran mendatar.

Apabila pembalutan dimatikan (Tiada balutan), semua item dipaksa untuk muat dalam satu baris tunggal, yang boleh menyebabkan item mengecil melebihi saiz asasnya jika ruang tidak mencukupi. Sebaliknya, apabila Balut diaktifkan, item yang melebihi lebar bekas akan jatuh ke baris baharu. Dalam situasi multi-baris ini, sifat align-content memainkan peranan penting untuk menjarakkan baris-baris tersebut sebagai satu kumpulan, manakala Gap menetapkan jarak konsisten antara item secara mendatar dan menegak.

Corak Reka Letak Flexbox yang Biasa

Flexbox memudahkan pembinaan pelbagai corak reka letak responsif yang sering digunakan dalam pembangunan web:

• Tengah (Centering): Menjajarkan elemen tepat di tengah-tengah bekas secara mendatar dan menegak dengan menetapkan justify-content dan align-items ke nilai Tengah.
• Bar navigasi: Menyusun logo dan pautan menu di hujung yang bertentangan menggunakan Ruang di antara.
• Timbunan: Menyusun elemen secara menegak menggunakan arah Lajur dengan jurang yang konsisten.
• Kad: Menyusun grid kad responsif yang membalut secara automatik apabila ruang skrin mengecil.
• Bar sisi: Meletakkan kandungan utama dan bar sisi bersebelahan, di mana kandungan utama membesar untuk mengisi ruang manakala bar sisi mengekalkan saiz asasnya.

Pemprosesan Tempatan dan Privasi

Reka letak anda dibina terus dalam penyemak imbas anda. Tiada apa-apa yang anda tetapkan di sini akan dimuat naik ke BroBroGo. Semua pengiraan, perubahan visual pada pratonton langsung, dan penjanaan kod CSS berlaku secara tempatan pada peranti anda.

Soalan Lazim (FAQ)

Apakah perbezaan antara justify-content dan align-items? Justify-content menjarakkan item di sepanjang paksi utama — arah aliran baris atau lajur — manakala align-items meletakkan item merentasi paksi yang satu lagi. Tukar arah daripada baris kepada lajur dan kedua-dua paksi akan bertukar, jadi justify-content mula berfungsi dari atas ke bawah dan align-items dari kiri ke kanan.

Bagaimanakah kawalan bagi setiap item berfungsi? Pilih item mengikut nombornya, kemudian tetapkan sejauh mana ia membesar untuk mengisi ruang kosong, sejauh mana ia mengecil apabila ruang sempit, saiz permulaannya (asas) dan jajaran paksi silangnya sendiri. Tertib menggerakkan item lebih awal atau lebih lewat pada skrin tanpa menyentuh HTML. Hanya item yang anda ubah sahaja mendapat peraturan tersendiri dalam CSS.

Bilakah wrap dan align-content menjadi penting? Dengan pembalutan dimatikan, setiap item dipaksa ke dalam satu baris dan boleh dipersempitkan. Hidupkannya dan item yang tidak lagi muat akan jatuh ke baris seterusnya — ketika itulah align-content mengambil alih, menjarakkan baris sebagai satu kumpulan. Gap menetapkan ruang antara item, dan antara baris, tanpa margin.

Bagaimanakah cara mendapatkan kod CSS yang telah dijana? Selepas melaraskan bekas dan item mengikut keperluan reka bentuk anda, kod CSS akan dijana secara automatik pada bahagian output. Anda hanya perlu mengklik butang "Salin CSS" yang akan bertukar keadaan kepada "Copied" untuk menyimpan kod tersebut ke dalam papan klip (clipboard) anda.