Pengembang / Tata letak CSS

Flexbox Playground: Kontrol CSS Container dan Item

Coba arah flex, wrapping, justifikasi, alignment, dan jarak, lalu sesuaikan grow, shrink, basis, order, serta alignment setiap item. Lihat perubahan layout dan salin CSS-nya.

Flexbox Playground: Kontrol CSS Container dan Item: Menampilkan container flex langsung dengan properti item yang dapat diedit serta penjelasan singkat di samping setiap kontrol. Preview memiliki tinggi tetap agar efek pada sumbu silang terlihat. Layout Grid dengan baris dan kolom bersama tersedia di generator CSS Grid. Berjalan 100% lokal di browser Anda tanpa upload file ke server.

Kategori: Tools developer
Dijalankan: Di browser Anda
Biaya: Gratis · tanpa daftar
Ketersediaan: Siap digunakan

Uji tata letak FlexboxPemrosesan lokal

Berjalan sepenuhnya di browser Anda

ArahMengatur sumbu utama dan arahnya.WrapMengizinkan baris tambahan saat item tidak muat.Ratakan kontenMendistribusikan ruang tersisa pada sumbu utama.Sejajarkan itemMenjajarkan item pada sumbu silang di setiap baris.Sejajarkan kontenMendistribusikan baris pada sumbu silang saat wrapping membuat beberapa baris.Jeda (px)Mengatur jarak antara item dan baris yang berdekatan.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

Gunakan flexbox untuk baris atau kolom. Gunakan CSS Grid saat baris dan kolom memerlukan track bersama. Buka generator CSS Grid

Item yang dipilih 1PerbesarPorsi relatif ruang kosong positif.PerkecilBobot penyusutan relatif, dikalikan dengan ukuran dasar.BasisUkuran awal pada sumbu utama sebelum diperbesar atau diperkecil.UrutanHanya urutan visual; urutan pembacaan dan keyboard tetap tidak berubah.Sejajarkan diriMengganti perataan sumbu silang container untuk item ini.

Model tata letak flex

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Ruang kosong didistribusikan menggunakan bobot pertumbuhan dan penyusutan flex sepanjang sumbu utama.

Perataan dan aksesibilitas

Konsep dasar flexbox di MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox . Sumbu silang tegak lurus terhadap sumbu utama; pengurutan ulang secara visual tidak mengubah urutan dokumen.

Cara menggunakannya

Atur arah, wrapping, dan alignment container.
Klik item, lalu ubah ukuran dan alignment khususnya.
Tambah atau hapus item, periksa layout, lalu salin CSS yang dihasilkan.

Privasi & batasan

Pengaturan layout diproses secara lokal di browser Anda.

Alat terkait

Pertanyaan umum

Mengapa align-content terkadang tidak melakukan apa-apa?

Properti ini mendistribusikan baris flex. Agar efeknya terlihat, diperlukan wrapping, beberapa baris, dan ruang kosong pada sumbu silang.

Apakah order mengubah urutan pembaca layar?

Tidak. Properti ini mengubah urutan visual, sedangkan urutan pembacaan dokumen dan keyboard tetap tidak berubah. Pertahankan urutan dokumen yang logis.

Kapan sebaiknya saya menggunakan Grid?

Gunakan Grid saat baris dan kolom perlu berbagi track. Flexbox berguna saat item terutama disusun sepanjang satu sumbu.

Alat gratis · berjalan di browser anda · tanpa perlu akun