Flexbox Generator

Visually build CSS Flexbox layouts.

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

Jumlah item: 5

Pratinjau langsung

CSS yang dihasilkan

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  gap: 8px;
}

Tentang alat ini

Generator CSS Flexbox memungkinkan Anda mengonfigurasi flex container secara visual dengan menyesuaikan semua properti flexbox utama — flex-direction, flex-wrap, justify-content, align-items, dan align-content.

Flexbox adalah modul tata letak CSS yang dirancang untuk tata letak satu dimensi (baris atau kolom). Memahami interaksi setiap properti sangat penting untuk membangun UI responsif.

Cara penggunaan

Sesuaikan flex-direction untuk mengontrol sumbu utama (baris atau kolom).
Atur flex-wrap untuk mengontrol apakah item membungkus ke baris berikutnya.
Gunakan justify-content untuk mendistribusikan item sepanjang sumbu utama.
Gunakan align-items untuk menyelaraskan item sepanjang sumbu silang.
Ubah jumlah item pratinjau menggunakan slider.
Klik Salin untuk menyalin CSS yang dihasilkan.

Kasus penggunaan

Pengembang frontend membuat prototipe bilah navigasi, kisi kartu, dan bilah alat dengan cepat. Pemula CSS belajar interaksi properti flexbox secara visual.

Pertanyaan umum

Apa perbedaan antara align-items dan align-content? — align-items menyelaraskan item dalam satu baris; align-content hanya berlaku saat ada beberapa baris (flex-wrap diatur ke wrap).
Apakah flexbox berfungsi untuk tata letak dua dimensi? — Flexbox bersifat satu dimensi. Untuk tata letak grid kompleks, gunakan CSS Grid.
Apakah flexbox didukung di semua browser? — Ya. Flexbox didukung penuh di semua browser modern termasuk Chrome, Firefox, Safari, dan Edge.