Cara menggunakan Generator Flexbox CSS
- Pilih preset — tengah, navbar, kartu yang wrapping, sidebar, stack — atau mulai dari nol.
- Atur container: flex-direction, flex-wrap, justify-content (sumbu utama), align-items (sumbu silang), dan gap.
- Klik item untuk mengatur flex-grow, shrink, basis, order, dan align-self; gunakan + Tambah item atau Hapus untuk mengubah jumlah item.
- Ubah ukuran container untuk mengujinya, lalu salin CSS, HTML, atau kelas Tailwind.
Dua sumbu pada flexbox
Flexbox menata item sepanjang sumbu utama (diatur oleh flex-direction) dan sumbu silang yang tegak lurus dengannya. justify-content membagi item sepanjang sumbu utama; align-items mengatur perataannya pada sumbu silang. Jika kamu beralih ke column, keduanya bertukar peran — itulah sebabnya “rata tengah secara vertikal” kadang membutuhkan justify-content dan kadang align-items.
flex: grow shrink basis
| Singkatan | Artinya | Cocok untuk |
|---|---|---|
flex: 1 | 1 1 0% | Kolom dengan lebar sama yang berbagi ruang |
flex: auto | 1 1 auto | Tumbuh mengikuti ukuran konten itu sendiri |
flex: none | 0 0 auto | Item tetap, seperti logo atau ikon |
flex: 1 1 240px | Mulai dari 240px, lalu membesar atau mengecil | Grid kartu yang wrapping |
margin-left: auto pada salah satu item akan mendorongnya — beserta semua item setelahnya — ke ujung paling kanan, cara klasik untuk membuat tombol “Masuk” rata kanan di navbar. Untuk layout dua dimensi dengan baris dan kolom, Generator CSS Grid lebih cocok.
Juga dicari sebagai: flexbox generator, playground flexbox, cara center div flexbox, generator justify-content, align-items css, generator layout flex, generator flex tailwind, contoh css flex.
Tool yang cocok dipakai bersama Generator Flexbox CSS
- Generator Border Radius — Bulatkan sudut kotak mana pun: geser satu slider untuk semua sudut atau atur tiap sudut secara terpisah, beralih ke sudut elips untuk bentuk blob dan daun, lalu salin CSS border-radius terpendek yang valid.
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Konverter CSS ke Tailwind — Tempel aturan atau deklarasi CSS dan dapatkan utility class Tailwind yang setara untuk setiap selector, termasuk state hover: dan arbitrary value seperti p-[13px].
- Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.