Generator CSS Flexbox

Atur flex-direction, wrap, justify-content, align-items, gap, serta flex, order, dan align-self per item secara visual, dengan elemen anak langsung dan CSS siap salin.

Kontainer

flex-direction

flex-wrap

justify-content

align-items

align-content

gappx

align-content hanya berpengaruh jika item terbungkus ke beberapa baris.

Jumlah item

Elemen 1

Pilih item di sini atau klik item di pratinjau.

flex-grow

flex-shrink

order

flex-basis

align-self

Pratinjau

Seret sudut bawah pratinjau untuk mengubah ukuran kontainer.

Kode CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}

Alat Terkait

Lihat Semua

Generator CSS Box Shadow Generator CSS Gradient Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow Generator CSS Animation

Apa itu Generator CSS Flexbox?

Playground flexbox interaktif: atur properti kontainer, tambahkan hingga 12 item anak, dan sesuaikan flex-grow, flex-shrink, flex-basis, order, dan align-self per item. Pratinjau menerapkan persis CSS yang dihasilkan.

Cara menggunakan Generator CSS Flexbox

Atur kontainer: flex-direction, flex-wrap, justify-content, align-items, align-content, dan gap.
Pilih Jumlah item yang ditampilkan di pratinjau.
Pilih sebuah item (lewat tombol atau klik di pratinjau) lalu atur flex-grow, flex-shrink, flex-basis, order, dan align-self.
Ubah ukuran pratinjau dengan menyeret sudutnya untuk melihat bagaimana tata letak bereaksi.
Salin kode CSS untuk .container dan aturan .item-n.

Contoh

Masukan

justify-content space-between, gap 16px; item 2: flex-grow 1, order 2, align-self center

Keluaran

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

.item-2 {
  flex: 1 1 auto;
  order: 2;
  align-self: center;
}

Kapan menggunakan Generator CSS Flexbox

Gunakan flexbox untuk tata letak satu dimensi: bilah navigasi, toolbar, grup tombol, media object, dan pemusatan. Untuk tata letak halaman dua dimensi dengan baris dan kolom sekaligus, Generator CSS Grid biasanya lebih cocok.

Cara kerja Generator CSS Flexbox

Kontainer selalu mendapat display: flex ditambah direction, wrap, justify-content, dan align-items. align-content hanya ditulis jika item bisa membungkus ke baris baru (tidak berpengaruh pada satu baris), dan gap hanya jika lebih dari 0. Untuk item, hanya nilai yang berbeda dari default yang ditulis: flex: grow shrink basis jika bukan 0 1 auto, order jika bukan 0, dan align-self jika bukan auto, sebagai aturan bernama .item-1, .item-2… flex-basis yang tidak valid ditandai dan diabaikan.

Kasus Penggunaan Umum

Memusatkan konten secara horizontal dan vertikal
Bilah navigasi dengan item yang didorong ke kanan
Kolom dengan lebar sama memakai flex: 1
Daftar tag atau kartu yang membungkus ke baris baru
Mengubah urutan item secara visual dengan order

Pertanyaan Umum

Mengapa align-content tidak ada di CSS saya?

align-content hanya mendistribusikan baris-baris pada kontainer flex yang membungkus. Dengan flex-wrap: nowrap hanya ada satu baris, jadi alat ini tidak menuliskannya.

Apa arti flex: 1 1 auto?

Item boleh membesar (1) dan mengecil (1) dari ukuran otomatisnya. flex-grow menentukan bagaimana ruang sisa dibagi antar item.

Apakah order memengaruhi aksesibilitas?

order hanya mengubah urutan visual. Pembaca layar dan fokus keyboard tetap mengikuti urutan sumber HTML, jadi jangan gunakan untuk penataan ulang yang bermakna.