Skip to main content
Penguin ToolsAlat Penguin

Generator CSS Flexbox

Buat tata letak Flexbox secara visual dan hasilkan kode CSS. Sesuaikan semua properti dengan lembar contekan bawaan.

Pengaturan Kontainer

Pratinjau

flex container
1
2
3
4

CSS yang dihasilkan

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}
Bagikan alat ini
📖

Cara Menggunakan

Step 1

Atur Properti

Atur Properti

Pilih properti Flexbox

Step 2

Pratinjau

Pratinjau

Pratinjau tata letak secara real-time

Step 3

Salin

Salin

Salin kode CSS untuk digunakan

✨

Fitur

Editor Visual

Kontrol visual semua properti Flex

Pengaturan Anak

Sesuaikan jumlah dan ukuran elemen anak

Lembar Contekan

Termasuk referensi properti Flexbox

❓

FAQ

Model tata letak CSS untuk tata letak 1D (baris atau kolom).

🔗Alat Terkait

🎨
Alat Desain

Konverter Kode Warna

Konversi antara kode warna HEX, RGB, dan HSL. Gunakan pemilih warna dan pratinjau waktu nyata untuk pemilihan warna yang intuitif.

🎨
Alat Desain

Pemilih Warna

Pilih warna secara intuitif menggunakan roda warna dan slider. Dapatkan dan salin kode warna dalam format HEX, RGB, dan HSL.

🎨
Alat Desain

Ekstraktor Warna Gambar

Deteksi warna dominan dari gambar secara otomatis dan hasilkan palet warna. Anda juga dapat mengklik di mana saja pada gambar untuk mengambil warna individual.

🎯
Alat Desain

Pengambil Warna Rata-rata Gambar

Hitung warna rata-rata dari seluruh gambar atau area yang dipilih. Berguna untuk memilih skema warna atau warna latar belakang thumbnail.

🌈
Alat Desain

Generator CSS Gradien

Buat gradien CSS secara visual dengan kontrol seret. Mendukung tipe gradien linear, radial, dan conic dengan preset.

🔲
Alat Desain

Generator CSS Box Shadow

Buat CSS box-shadow secara visual dengan slider. Mendukung beberapa bayangan dan bayangan inset.