Generator Flexbox CSS

Cara menggunakan

1. Tetapkan properti kontainer: konfigurasikan kontainer flex, flex-direction, justify-content, align-items, flex-wrap, dan gap.
2. Tambahkan dan konfigurasikan item flex: tambahkan elemen anak dan tetapkan flex-grow, flex-shrink, flex-basis, align-self, dan order secara individual.
3. Salin CSS: dapatkan CSS lengkap untuk kontainer dan item, siap digunakan dalam proyek Anda.

Mengapa menggunakan generator Flexbox?

Flexbox adalah alat penting untuk tata letak CSS satu dimensi, menyelaraskan elemen dalam baris atau kolom dengan kontrol distribusi dan perataan yang andal. Tetapi propertinya banyak dan interaksinya kompleks: justify-content vs align-items, flex-grow vs flex-basis, sumbu utama vs sumbu silang. Generator interaktif ini memberikan umpan balik visual seketika saat Anda memodifikasi setiap properti, menjadikannya cara tercepat untuk mempelajari Flexbox dan mendapatkan CSS yang tepat untuk tata letak Anda.

Fitur

• Pratinjau interaktif: seret item flex dan aktifkan properti untuk melihat perubahan secara real-time.
• Semua properti kontainer: flex-direction, flex-wrap, justify-content, align-items, align-content, dan gap.
• Kontrol per item: tetapkan flex-grow, flex-shrink, flex-basis, align-self, dan order secara individual untuk setiap item.
• Indikator sumbu visual: sumbu utama dan sumbu silang disorot untuk memperkuat model konseptual.
• Keluaran CSS: CSS lengkap, siap salin, untuk kontainer dan semua item yang dikonfigurasi.

Pertanyaan umum

Apa perbedaan antara justify-content dan align-items?

justify-content mendistribusikan item sepanjang sumbu utama (horizontal secara default). align-items menyelaraskan item sepanjang sumbu silang (vertikal secara default). Saat flex-direction adalah column, sumbu terbalik, justify-content menjadi vertikal dan align-items menjadi horizontal.

Kapan menggunakan Flexbox atau CSS Grid?

Gunakan Flexbox untuk tata letak satu dimensi, barisan tombol, bilah navigasi, daftar kartu yang harus melompat ke baris baru. Gunakan CSS Grid untuk tata letak dua dimensi di mana Anda perlu mengontrol baris dan kolom secara bersamaan, seperti tata letak halaman lengkap atau kisi kartu yang kompleks.

Apa arti flex: 1?

flex: 1 adalah shorthand untuk flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Itu memberi tahu item untuk tumbuh mengisi ruang yang tersedia, menyusut jika perlu, dan memulai dari nol sebelum mendistribusikan ruang. Semua item dengan flex: 1 berbagi ruang secara merata.

Apa yang sebenarnya dilakukan Flexbox

Flexbox (Flexible Box Layout) adalah model layout CSS yang dirancang untuk mendistribusikan ruang dan menyelaraskan item dalam arah satu dimensi: baik baris atau kolom. Ia memperkenalkan dua konsep inti yang menentukan bagaimana semuanya berperilaku: sumbu utama (arah utama item mengalir, horizontal secara default) dan sumbu silang (tegak lurus terhadap utama, vertikal secara default). Setelah Anda menginternalisasi utama vs silang, setiap properti Flexbox memetakan ke salah satunya: justify-content bekerja pada sumbu utama, align-items bekerja pada sumbu silang, flex-direction menukar sumbu mana yang mana.

Flexbox memecahkan serangkaian masalah layout yang mengganggu pengembang web dari 1998 hingga 2014. Sebelum Flexbox, memusatkan elemen secara vertikal memerlukan trik (display: table-cell, margin negatif, position: absolute dengan transformasi translate). Kolom dengan tinggi sama memerlukan teknik faux columns dengan gambar latar belakang. Footer lengket memerlukan perhitungan piksel yang tepat. Flexbox membuat semua ini sepele: deklarasi satu baris menggantikan dekade workaround CSS. Trade-off-nya adalah Flexbox bersifat satu dimensi; untuk layout dua dimensi (baris DAN kolom secara bersamaan), CSS Grid (dirilis 2017) adalah alat yang lebih baik.

Properti Flexbox membagi dengan rapi menjadi dua kelompok: properti kontainer (diterapkan ke induk: display: flex, flex-direction, flex-wrap, justify-content, align-items, align-content, gap) dan properti item (diterapkan ke anak: flex-grow, flex-shrink, flex-basis, align-self, order). Properti kontainer mengontrol pola layout; properti item mengontrol pengecualian individu. Generator ini menampilkan kedua set sehingga Anda dapat bereksperimen dengan bagaimana mereka berinteraksi tanpa menulis kode.

Bagaimana alat ini bekerja di balik layar

Pratinjau langsung adalah kontainer flex dengan elemen anak sampel. Saat Anda mengubah properti kontainer (flex-direction, justify-content, dll.) melalui dropdown dan input, JavaScript memperbarui gaya inline kontainer pratinjau, dan browser me-render ulang layout. Pratinjau adalah implementasi Flexbox browser yang sebenarnya, bukan simulasi JavaScript: Anda melihat dengan tepat apa yang akan dihasilkan CSS Anda pada halaman nyata.

Kontrol per item memungkinkan Anda menyesuaikan setiap anak secara individu. Anda dapat menambah atau menghapus item, mengatur nilai flex-grow, flex-shrink, flex-basis, align-self, dan order mereka, dan melihat bagaimana kontainer mendistribusikan ulang ruang sesuai dengan itu. Indikator sumbu visual menunjukkan sumbu utama dan silang untuk konfigurasi saat ini, memperkuat model mental. Propertinya adalah CSS nyata yang dapat Anda salin langsung ke stylesheet Anda, tidak diperlukan transpilasi atau prefiks framework.

Panel CSS yang Dihasilkan diperbarui dengan setiap interaksi, menghasilkan dua aturan CSS: satu untuk kontainer (dengan properti flex yang dipilih) dan satu untuk item. Klik Salin CSS dan aturan ditulis ke clipboard Anda. Alat itu sendiri tidak pernah membuat permintaan jaringan; rendering pratinjau, pembuatan kode, dan penulisan clipboard semuanya terjadi di JavaScript pada perangkat Anda. Muat ulang halaman dan konfigurasi Anda hilang kecuali Anda menyalin CSS terlebih dahulu.

Sejarah singkat Flexbox

• Kekacauan layout CSS 2.1, 1998 hingga 2008.Sebelum Flexbox, pengembang web menggunakan float: left dengan trik clearfix, display: inline-block dengan bug whitespace, atau display: table dengan trik table-cell untuk layout. Pemusatan vertikal memerlukan vertical-align pada table-cell, trik margin negatif, atau posisi absolut. Kolom sama memerlukan JavaScript. Komunitas web menghasilkan ribuan posting blog tentang workaround tipe bagaimana melakukan X dengan CSS.
• Draft Flexible Box pertama, 2009.W3C CSS Working Group menerbitkan Working Draft pertama dari CSS Flexible Box Layout Module pada Juli 2009, dengan tiga sintaks berkembang selama lima tahun berikutnya: sintaks box-* asli (cepat dideprecated), sintaks menengah flexbox 2011 (masih terlihat dalam kode legacy IE 10), dan sintaks final flex yang kita gunakan hari ini.
• Dukungan browser stabil, 2014.Chrome 29, Firefox 28, Safari 9, dan IE 11 semua mengirimkan Flexbox yang berfungsi pada 2014, dengan IE 11 mempertahankan kasus tepi yang buggy. Transisi dari Flexbox adalah masa depan ke Flexbox adalah saat ini terjadi pada 2014-2015 saat situs produksi mengadopsinya untuk layout utama. Holy Grail Layout (header, footer, dua sidebar, konten utama) menjadi sepele.
• Panduan Lengkap Flexbox dari Chris Coyier, 2013.CSS-Tricks menerbitkan panduan Flexbox komprehensif Chris Coyier (April 2013), yang menjadi referensi kanonik. Pada 2016, panduan ini termasuk hasil teratas untuk pertanyaan Flexbox apa pun dan diterjemahkan ke dalam puluhan bahasa. Ini secara dramatis mempercepat adopsi Flexbox.
• CSS Grid tiba sebagai pelengkap, 2017.CSS Grid Layout dirilis di Chrome 57, Firefox 52, dan Safari 10.1 (Maret 2017). Jauh dari menggantikan Flexbox, Grid melengkapinya: Flexbox unggul dalam layout baris/kolom satu dimensi, Grid unggul dalam layout dua dimensi. Desain modern biasanya menggunakan keduanya: Grid untuk struktur tingkat halaman, Flexbox untuk pengaturan internal komponen (item nav, grup tombol, konten kartu).
• Properti gap dan subgrid hadir, 2020 hingga 2024.Properti gap (awalnya hanya Grid) menjadi kompatibel dengan Flexbox di semua browser utama pada Safari 14.1 (April 2021). Sintaks gap: 1rem yang lebih bersih menggantikan pola margin pada setiap anak kecuali yang terakhir yang lebih lama. CSS Subgrid (2023+) memungkinkan grid bersarang menyelaraskan dengan track grid induk, berguna untuk layout sistem desain.

Alur kerja dunia nyata

• Bar navigasi.Nav horizontal dengan logo di kiri dan link di kanan adalah kasus penggunaan kanonik Flexbox. display: flex; justify-content: space-between; align-items: center; pada kontainer nav, dan Anda selesai. Tambahkan gap: 1.5rem untuk spasi antar link. CSS 4 baris ini menggantikan apa yang dulu memerlukan float, clearfix, dan matematika margin pixel-perfect.
• Pemusatan vertikal dan horizontal.Pertanyaan klasik bagaimana cara saya memusatkan div ini? memiliki jawaban Flexbox: display: flex; justify-content: center; align-items: center; pada induk. Bekerja terlepas dari ukuran intrinsik anak, terlepas dari tinggi induk, terlepas dari perubahan konten dinamis. Ini adalah peningkatan kualitas hidup terbesar tunggal yang dibawa Flexbox ke pengembangan web.
• Layout daftar kartu dengan pembungkusan.Sebaris kartu yang membungkus ke beberapa baris pada layar sempit: display: flex; flex-wrap: wrap; gap: 1rem; pada kontainer, dan flex: 1 1 250px pada setiap kartu. Kartu tumbuh untuk mengisi ruang yang tersedia, menyusut hingga minimum 250px, dan membungkus ke baris baru ketika 250px tidak muat. Desain responsif tanpa media query.
• Baris formulir dengan input berlabel.Formulir sering membutuhkan label dan input yang sejajar: display: flex; gap: 0.5rem; pada baris, flex: 0 0 120px pada label (lebar tetap 120px), flex: 1 pada input (mengisi ruang yang tersisa). Mengubah ukuran kontainer formulir menjaga label tetap dan meregangkan input. Lebih mudah daripada CSS Grid untuk baris formulir dua kolom.
• Footer lengket.Membuat footer menempel ke bagian bawah viewport saat konten pendek, tetapi mengikuti konten saat panjang: body { display: flex; flex-direction: column; min-height: 100vh; } dengan main { flex: 1 } mendorong footer ke bawah. Masalah sticky footer klasik dipecahkan dalam tiga deklarasi CSS, menggantikan workaround margin negatif dari tahun 2010-an.
• Grup tag dan badge.Daftar tag, chip, atau badge yang harus mengalir secara horizontal dan membungkus ke baris baru: display: flex; flex-wrap: wrap; gap: 0.5rem;. Setiap tag mengukur dirinya sendiri, dan kontainer menangani penataan. Banyak digunakan dalam UI penyaringan, penandaan konten, antarmuka pencarian. Bergabung dengan baik dengan selector :has() untuk styling tergantung status.

Jebakan umum dan artinya

• Jebakan min-width: auto.Item flex memiliki min-width: auto implisit (atau min-height: auto untuk arah kolom) yang mencegahnya menyusut di bawah ukuran minimum intrinsik kontennya. Hal ini menyebabkan pola overflow: hidden dan text-truncation gagal secara tak terduga di dalam kontainer flex. Perbaikan: atur secara eksplisit min-width: 0 pada item flex bermasalah. Ini adalah penyebab paling umum dari mengapa layout flex saya rusak?.
• Kebingungan flex-basis vs width.flex-basis adalah ukuran awal item flex sepanjang sumbu utama, sebelum perhitungan grow/shrink. width (atau height untuk arah kolom) adalah ukuran CSS reguler. Ketika keduanya diatur, flex-basis menang. Shorthand flex: 1 1 200px mengatur flex-basis ke 200px. Untuk sebagian besar kasus, lebih memilih flex-basis daripada width di dalam kontainer flex untuk kejelasan.
• Dukungan gap di browser lama.Properti gap awalnya hanya untuk Grid dan tiba di Flexbox baru-baru ini: Safari 14.1 (April 2021), dan lebih awal di Chrome/Firefox. Untuk proyek yang mendukung Safari lama (atau WebView lama di aplikasi iOS), sediakan fallback menggunakan margin pada anak-anak. Sebagian besar proyek modern dapat dengan aman menggunakan gap; periksa target dukungan browser spesifik Anda.
• Flex-shrink default dapat menyebabkan ukuran yang tidak terduga.Item flex default ke flex-shrink: 1, artinya mereka dapat menyusut di bawah lebar yang dideklarasikan jika kontainer terlalu sempit. Untuk menjaga elemen pada lebar yang dideklarasikan terlepas dari ruang yang tersedia, atur flex-shrink: 0. Umum dengan sidebar yang harus tetap 250px lebar bahkan ketika area konten utama mendorongnya: flex: 0 0 250px bukannya flex-basis: 250px.
• Flex-basis persen relatif terhadap kontainer.flex-basis: 50% berarti 50% dari ukuran sumbu utama kontainer flex. Ini bekerja untuk layout tipikal tetapi berinteraksi dengan aneh dengan flex-wrap: jika kontainer sendiri memiliki ukuran sumbu utama berbasis persen dalam konteks flex bersarang, matematika menjadi kompleks. Saat ragu, gunakan nilai piksel atau min()/max()/clamp() untuk flex-basis daripada persentase.
• Flexbox IE 11 memiliki kasus tepi yang buggy.Internet Explorer 11 (pensiun Juni 2022) menerapkan Flexbox dengan beberapa bug: min-height tidak dihormati, kontainer flex bersarang rusak, flex: 1 kadang-kadang memperlakukan flex-basis sebagai 0px bukannya 0%, shorthand flex dua-nilai ditangani secara tidak konsisten. Untuk proyek yang tidak lagi mendukung IE, abaikan. Untuk perangkat lunak perusahaan legacy, uji secara menyeluruh atau gunakan pendekatan layout alternatif.

Privasi: semuanya berjalan di browser Anda

Alat pembelajaran dan layout CSS hadir dalam dua rasa: halaman HTML sederhana yang menjalankan JavaScript sisi klien (pribadi, cepat, tanpa setup) dan editor cloud dengan proyek yang disimpan (kolaboratif tetapi dengan trade-off privasi). Alat ini adalah jenis pertama. Pilihan properti Anda, konfigurasi item Anda, CSS yang dihasilkan Anda: semuanya tetap di sesi browser Anda. Muat ulang halaman dan statusnya hilang kecuali Anda menyalin CSS terlebih dahulu.

Taruhan privasi rendah di sini karena konfigurasi Flexbox jarang berisi informasi sensitif. Tetap saja, kurangnya analitik penting: Anda dapat bereksperimen dengan bebas tanpa proses trial-and-error Anda direkam. Sangat berguna dalam pengaturan kelas atau pelatihan perusahaan di mana memiliki siswa atau peserta pelatihan mendaftar akun di platform pihak ketiga adalah titik gesekan. Alat ini adalah halaman statis tunggal tanpa backend, dapat digunakan di browser apa pun, termasuk mesin perusahaan yang terkunci.

Saat alat lain adalah pilihan yang tepat

• CSS Grid untuk layout dua dimensi.Flexbox bersifat satu dimensi; jika Anda perlu menyelaraskan item dalam baris dan kolom secara bersamaan (misalnya, layout gaya majalah dengan kartu ukuran campuran), CSS Grid jauh lebih cocok. Gunakan CSS Grid Generator kami untuk pekerjaan semacam itu. Keduanya bekerja sangat baik bersama: Grid untuk struktur tingkat halaman, Flexbox untuk pengaturan internal komponen.
• Tabel HTML untuk data tabular.Jika data Anda sebenarnya adalah tabel (baris mewakili rekaman, kolom mewakili field), gunakan elemen <table> nyata dengan <tr> dan <td>. Tabel memberikan makna semantik kepada pembaca layar, header yang dapat diurutkan, dan penyelarasan bawaan. Flexbox/Grid untuk tabel adalah antipattern era 2010; pedoman aksesibilitas modern secara eksplisit merekomendasikan tabel HTML semantik untuk data tabular.
• position: absolute untuk overlay dan tooltip.Overlay modal, tooltip, menu dropdown, dan elemen UI mengambang serupa bekerja paling baik dengan position: absolute atau position: fixed daripada Flexbox. Flex/Grid mengelola aliran layout; positioning absolut mengangkat elemen sepenuhnya keluar dari aliran. Gabungkan: Flexbox untuk layout halaman utama, positioning absolut untuk modal yang menutupinya.
• CSS Subgrid untuk penyelarasan bersarang.Ketika layout bersarang perlu menyelaraskan dengan grid induk (misalnya, judul kartu semua menyelaraskan di seluruh grid kartu), CSS Subgrid (Firefox 71 2019, Chrome 117 2023, Safari 16 2022) lebih sesuai daripada Flexbox bersarang. Subgrid memungkinkan anak-anak mewarisi track grid dari induk, memastikan penyelarasan sempurna di seluruh struktur bersarang. Layak dipelajari untuk pekerjaan komponen sistem desain.

Pertanyaan umum lainnya

Apa arti pasti dari flex shorthand?

Shorthand flex mengatur tiga properti sekaligus: flex: <grow> <shrink> <basis>. Nilai umum: flex: 1 (1, 1, 0%) untuk item distribusi sama, flex: 0 0 auto untuk item ukuran tetap, flex: 1 1 250px untuk item yang tumbuh/menyusut dari titik awal 250px. Shorthand memiliki nilai awal khusus ketika hanya satu atau dua nilai disediakan; bentuk eksplisit tiga nilai menghindari kejutan.

Bagaimana cara membuat item membungkus ke beberapa baris?

Atur flex-wrap: wrap pada kontainer. Item meluap ke baris baru ketika tidak muat. Gabungkan dengan flex-basis pada item untuk mengontrol berapa banyak yang muat per baris: flex: 1 1 200px menciptakan grid responsif di mana item setidaknya 200px, tumbuh untuk mengisi ruang yang tersisa, dan membungkus ke baris baru pada layar sempit. Properti gap kontainer menangani spasi antara baris yang dibungkus dan item.

Dapatkah saya membalikkan urutan item flex?

Ya, dengan beberapa cara. Tingkat kontainer: flex-direction: row-reverse (atau column-reverse) membalikkan semua item dalam urutan. Tingkat item: properti order memberikan bobot numerik; item dengan angka lebih rendah muncul lebih dulu. Urutan default adalah 0; mengatur order: -1 pada satu item memindahkannya ke depan. Catatan aksesibilitas: pengurutan ulang visual tidak memengaruhi urutan tab atau urutan baca pembaca layar, yang dapat membingungkan pengguna keyboard dan teknologi bantuan. Gunakan dengan hemat.

Apa perbedaan antara align-items dan align-content?

align-items menyelaraskan item dalam baris (atau kolom) mereka sepanjang sumbu silang. align-content menyelaraskan baris (atau kolom) itu sendiri di dalam kontainer, hanya bermakna ketika ada beberapa baris yang dibungkus. Jika flex-wrap diatur ke nowrap (default), align-content tidak berpengaruh karena hanya ada satu baris. Gunakan align-items untuk penyelarasan satu baris, align-content untuk penyelarasan multi-baris.

Bagaimana cara memusatkan satu elemen dengan Flexbox?

Jawaban klasik: display: flex; justify-content: center; align-items: center; pada kontainer induk. Ini memusatkan anak baik secara horizontal maupun vertikal. Hanya untuk horizontal: gunakan justify-content: center saja. Hanya untuk vertikal: gunakan align-items: center saja. Jika Anda perlu memusatkan di dalam induk dengan tinggi tidak diketahui, tambahkan min-height: 100vh ke induk sehingga memiliki ruang vertikal untuk dipusatkan di dalamnya. Seluruh pola menggantikan 20 tahun workaround pemusatan CSS.

Mengapa pemangkasan teks saya tidak berfungsi dalam kontainer flex?

Karena default min-width: auto pada item flex. Text-overflow: ellipsis memerlukan elemen untuk benar-benar meluap kontainernya; dengan lebar minimum default diatur ke ukuran intrinsik konten, elemen tidak pernah meluap. Perbaikan: tambahkan min-width: 0 ke item flex yang berisi teks pemangkasan. Ini adalah bug Flexbox paling umum di jawaban Stack Overflow sepanjang masa: mencari flex text-overflow ellipsis not working mengembalikan ribuan versi dari jawaban yang persis sama ini.