Ruang eksperimen CSS Flexbox
Ruang eksperimen interaktif untuk mempelajari dan membuat tata letak Flexbox
Pengaturan tata letak
Preset tata letak
Penimpaan per item
Pilih item di pratinjau atau daftar untuk mengedit propertinya.
Referensi cepat Flexbox
Sumbu utama
justify-content mengatur perataan sepanjang sumbu utama (ditentukan oleh flex-direction).
Sumbu silang
align-items mengatur perataan sepanjang sumbu silang (tegak lurus terhadap flex-direction).
Multibaris
align-content hanya berlaku jika flex-wrap diatur ke wrap atau wrap-reverse dengan beberapa baris.
Pratinjau langsung
CSS yang dihasilkan
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}Ubah pengaturan atau pilih sebuah item. Pratinjau dan CSS diperbarui bersamaan.
Tentang Ruang eksperimen CSS Flexbox
Ruang eksperimen CSS Flexbox adalah alat visual dan interaktif untuk mempelajari serta bereksperimen dengan tata letak CSS Flexbox. Flexbox (Flexible Box Layout) adalah salah satu modul tata letak CSS yang paling andal dan paling banyak digunakan, dirancang untuk menata item di dalam kontainer dengan perilaku yang fleksibel dan responsif. Alat ini memungkinkan Anda mengubah setiap properti kontainer flex dan item flex secara real time dan melihat dengan tepat bagaimana tata letak Anda berubah.
Fitur utama
- Kontrol penuh atas semua properti kontainer flex: flex-direction, flex-wrap, justify-content, align-items, align-content, dan gap
- Penimpaan per item: order, flex-grow, flex-shrink, flex-basis, dan align-self
- Pratinjau visual langsung dengan item berwarna dan bernomor serta batas kontainer putus-putus
- Tata letak preset termasuk Bilah navigasi, Kisi kartu, Holy Grail, Konten di tengah, dan Tata letak sidebar
- Kode CSS yang dihasilkan otomatis dengan fungsi salin sekali klik
- Kontrol jumlah item dinamis dari 1 hingga 12 item
- Pilih item dengan klik untuk mengedit properti per item
- Dukungan mode gelap untuk penggunaan yang nyaman dalam kondisi pencahayaan apa pun
Memahami properti Flexbox
Flexbox bekerja pada dua sumbu: sumbu utama (ditentukan oleh flex-direction) dan sumbu silang (tegak lurus terhadap sumbu utama). Properti justify-content mendistribusikan ruang di sepanjang sumbu utama, sedangkan align-items menangani perataan pada sumbu silang. Saat flex-wrap mengizinkan pembungkusan ke beberapa baris, align-content mengatur jarak antarbaris tersebut. Setiap item flex dapat menimpa perataannya dengan align-self, mengatur rasio pertumbuhan dan penyusutannya, serta menetapkan ukuran dasar dengan flex-basis.
Pola tata letak Flexbox yang umum
Flexbox unggul dalam membangun bilah navigasi, memusatkan konten secara horizontal dan vertikal, membuat kisi kartu yang membungkus secara responsif, membangun tata letak sidebar dengan sidebar tetap dan konten utama yang fluid, serta menerapkan tata letak Holy Grail klasik dengan area header, footer, sidebar, dan konten utama. Gunakan tombol preset untuk langsung melihat pola-pola ini beraksi.
Untuk siapa alat ini?
- Pengembang web yang baru pertama kali belajar CSS Flexbox
- Insinyur frontend yang membuat prototipe tata letak responsif dengan cepat
- Desainer UI/UX yang ingin memvisualisasikan tata letak flex sebelum menulis kode
- Pelajar yang mempelajari teknik tata letak CSS untuk tugas kuliah atau wawancara kerja
- Pengajar yang mendemonstrasikan konsep Flexbox dalam lokakarya atau kelas
- Siapa pun yang perlu dengan cepat membuat CSS Flexbox untuk proyeknya