Penghasil CSS Flexbox
CSS Flexbox Generator memungkinkan Anda mengatur flex-direction, justify-content, align-items, flex-wrap, align-content, dan gap pada container, melihat pratinjau hingga 20 item secara langsung, dan menyalin CSS yang dihasilkan.
Tentang alat ini
CSS Flexbox Generator memungkinkan Anda mengatur flex-direction, justify-content, align-items, flex-wrap, align-content, dan gap pada container, melihat pratinjau hingga 20 item secara langsung, dan menyalin CSS yang dihasilkan.
Cara menggunakan
- Pilih arah dan pengaturan wrap.
- Atur justify-content dan align-items (serta align-content untuk baris yang ter-wrap).
- Atur gap dan jumlah item pratinjau.
- Klik Copy CSS untuk memakai aturan container-nya.
Perlu diketahui
- justify-content menyelaraskan item di sepanjang sumbu utama; align-items menyelaraskannya di sumbu silang.
- flex-direction: column menukar kedua sumbu, sehingga justify-content bekerja secara vertikal.
- align-content hanya berpengaruh saat item ter-wrap ke beberapa baris.
- Properti gap berfungsi di Flexbox pada semua browser utama saat ini.
- Flexbox bersifat satu dimensi; gunakan CSS Grid untuk baris dan kolom sekaligus.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Bagaimana cara menempatkan div di tengah dengan Flexbox?
Pada elemen induk, atur display: flex; justify-content: center; align-items: center; — elemen anak akan berada di tengah secara horizontal dan vertikal.
Apa bedanya justify-content dan align-items?
justify-content mendistribusikan item di sepanjang sumbu utama (secara default berupa baris); align-items memosisikannya di sepanjang sumbu silang.
Kapan sebaiknya memakai Flexbox, bukan Grid?
Gunakan Flexbox untuk layout satu dimensi seperti navigasi dan deretan tombol, dan Grid untuk layout halaman dua dimensi.
Mengapa align-content tidak berpengaruh apa-apa?
align-content hanya berlaku saat flex-wrap memungkinkan item ter-wrap ke lebih dari satu baris.