Lapangan Latihan CSS Flex

Eksperimen dengan CSS flexbox secara visual. Atur flex-direction, justify-content, align-items, flex-wrap, gap, serta order, grow, shrink, basis, dan align-self per item, lalu salin CSS container dan item yang dihasilkan.
Loading...
Container Settings & Items
Items3
AItem Aflex: 0 1 auto
BItem Bflex: 0 1 auto
CItem Cflex: 0 1 auto
Live Previewflex container
A80×60
B100×80
C60×100
Generated CSS
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

.item-a {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
  width: 80px;
  height: 60px;
}

.item-b {
  order: 1;
  flex: 0 1 auto;
  align-self: auto;
  width: 100px;
  height: 80px;
}

.item-c {
  order: 2;
  flex: 0 1 auto;
  align-self: auto;
  width: 60px;
  height: 100px;
}
©2026 Itung.online. Built for practical online workflows.
This site is protected by reCAPTCHA and the GooglePrivacy PolicyTerms of Serviceapply.

Overview

Lapangan Latihan CSS Flex adalah sandbox flexbox visual yang langsung bereaksi. Ubah properti container seperti flex-direction, justify-content, align-items, flex-wrap, dan gap, lalu sesuaikan order, grow, shrink, basis, serta align-self setiap item. Pratinjau diperbarui seketika dan CSS container serta item yang dihasilkan dapat disalin.

Common Use Cases

How to Use

1
Atur kontrol container: direction, justification, alignment, wrap, gap, dan height.
2
Sesuaikan setiap item dengan order, flex-grow, flex-shrink, flex-basis, align-self, width, dan height.
3
Perhatikan pratinjau langsung yang diperbarui pada setiap perubahan.
4
Salin blok CSS yang dihasilkan dan tempel ke proyek Anda.

Example Scenario

Tiga kartu membentang satu baris

Atur direction menjadi row, justify-content menjadi space-between, align-items menjadi stretch, dan hapus tinggi item tetap (jadikan 0). Ketiga item tersebar merata dan masing-masing meregang setinggi container, menghasilkan baris kartu klasik.

Technical Notes

Setiap item menghasilkan shorthand flex: grow shrink basis. Contoh: flex: 1 1 0% membuat item tumbuh dan menyusut secara merata dari basis nol.

flex-basis menerima auto, panjang seperti 150px atau 30%, atau angka tanpa satuan yang diubah playground menjadi px.

Item memakai min-width dan min-height 0 sehingga penyusutan berperilaku seperti tata letak flex sungguhan, bukan berhenti pada ukuran konten.

Untuk melihat align-items: stretch, kosongkan tinggi item. Tinggi eksplisit mengesampingkan stretch.

Common Mistakes

Frequently Asked Questions

justify-content menyelaraskan item di sepanjang sumbu utama (arah flex). align-items menyelaraskannya di sumbu silang (tegak lurus). Pada baris, justify menggerakkan item horizontal dan align vertikal.

Itu adalah singkatan flex: 1 1 0% — item dapat tumbuh dan menyusut serta mulai dari basis nol, sehingga ruang dibagi merata antar item fleksibel.

Item flex defaultnya min-width: auto, yang mencegah penyusutan di bawah ukuran konten. Playground mengatur min-width dan min-height menjadi 0 agar shrink bekerja seperti seharusnya.

Playground ini tentang ukuran flexbox, bukan satuan font. em berkaitan dengan tipografi; flex-grow, flex-shrink, dan flex-basis mengontrol pembagian ruang antar item flex.

Related Topics

CSS flexboxFlex containerFlex itemjustify-contentalign-itemsflex-grow