Cara memakai
- Ketik Nama kelas untuk kontainer, misalnya toolbar. CSS memakainya sebagai selector kelas.
- Pilih flex-direction, flex-wrap dan nilai perataannya. Setiap pilihan menampilkan nilai awalnya lebih dulu.
- Atur Jumlah item (1 sampai 12), lalu flex-grow, flex-shrink dan flex-basis setiap item.
- Periksa Pratinjau, lalu salin CSS ke lembar gaya Anda dan pasang kelasnya pada kontainer.
Properti kontainer
CSS Flexible Box Layout Module mengatur anak-anak kontainer flex sepanjang sumbu utama. flex-direction memilih sumbunya, dan flex-wrap memilih apakah anak-anak boleh pindah ke baris baru. justify-content membagi anak-anak sepanjang sumbu utama, sedangkan align-items dan align-content menempatkannya melintang sumbu itu.
- flex-direction mulai dari row, dan menerima row, row-reverse, column atau column-reverse.
- flex-wrap mulai dari nowrap, dan juga menerima wrap atau wrap-reverse.
- justify-content mulai dari flex-start, sedangkan align-items dan align-content mulai dari stretch.
Properti item
Setiap anak kontainer adalah item, dan ketiga properti flex-nya menentukan berapa ruang yang didapatnya. flex-grow mulai dari 0 dan mengambil ruang sisa sebanding dengan faktornya. flex-shrink mulai dari 1 dan menentukan seberapa banyak item melepaskan ruang ketika ruangnya kurang. flex-basis mulai dari auto, yang memakai ukuran yang dimiliki item, dan panjang atau persentase menetapkan ukuran lebih dulu.
flex: flex-grow flex-shrink flex-basis; nilai awalnya adalah 0 1 autoYang tidak ditulis halaman ini
- Properti order, align-self dan gap, yang bisa Anda tambahkan ke kontainer atau item secara manual.
- Item setelah item kedua belas: halaman ini berhenti di 12 item, sehingga daftar yang lebih panjang perlu aturannya ditulis secara manual.
Contoh kerja: bilah alat yang membungkus, dengan tiga item
Nama kelasnya toolbar, flex-wrap adalah wrap, justify-content adalah space-between dan align-items adalah center. Item pertama mempertahankan nilai awalnya, sehingga tidak punya aturan. Item kedua tumbuh untuk mengisi ruang sisa, dengan basis 0. Item ketiga mempertahankan ukurannya, dengan basis 200px. Halaman ini hanya menulis aturan untuk item kedua dan ketiga.
| Item | flex-grow | flex-shrink | flex-basis |
|---|---|---|---|
| 1 | 0 | 1 | auto |
| 2 | 1 | 1 | 0 |
| 3 | 0 | 0 | 200px |
Pertanyaan yang sering diajukan
Apa bedanya flex-grow dan flex-basis?
flex-basis adalah ukuran tempat item mulai sebelum ruang kosong dibagikan. flex-grow kemudian menentukan cara ruang sisa dibagi, sebanding dengan faktor setiap item. Item dengan basis 0 dan grow 1 mengambil ruang yang ditinggalkan item lain.
Mengapa item pertama dalam contoh tidak punya aturan?
Nilainya adalah nilai awal properti: flex-grow 0, flex-shrink 1 dan flex-basis auto. Peramban memakai nilai itu tanpa aturan, sehingga generator ini hanya menulis aturan untuk item yang berbeda dari nilai tersebut.
Mengapa align-items mulai dari stretch?
CSS Flexible Box Layout Module memberi align-items nilai awal stretch, sehingga item memenuhi sumbu melintang kecuali Anda memilih nilai lain. Generator ini mulai dari nilai yang sama, sehingga CSS-nya sesuai dengan yang dilakukan peramban tanpa deklarasi.
Mengapa basis hanya menerima px, rem, em dan persen?
Itulah satuan yang diperiksa generator ini. Basis auto atau 0 tanpa satuan juga diterima. Satuan lain, seperti vw, tidak disediakan di sini, sehingga tulislah secara manual jika tata letak Anda membutuhkannya.
Bisakah saya menambahkan jarak antaritem?
Tidak dengan generator ini, yang hanya menulis lima properti kontainer dan nilai flex item. Tambahkan gap ke aturan kontainer secara manual setelah Anda menyalin CSS-nya.
Apakah CSS yang saya buat dikirim ke mana pun?
Tidak. Pratinjau dan CSS dibuat di peramban Anda. Tidak ada yang disimpan atau dikirim ke server kami, jadi salin CSS-nya sebelum meninggalkan halaman.
Sumber
Angka dan teks terakhir diperiksa pada Kamis, 12 November 2026.