Materi
| Properti | Mengatur apa | Nilai yang sering dipakai |
|---|---|---|
| justify-content | Perataan pada sumbu utama | flex-start, center, space-between |
| align-items | Perataan pada sumbu silang | stretch, center, flex-start |
| gap | Jarak antar item | 8px, 16px, 1rem |
| flex-wrap | Boleh atau tidaknya item turun baris | nowrap, wrap |
.rak {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}Properti justify-content membagi sisa ruang di sumbu utama. Nilai flex-start menumpuk semua item di awal sumbu dan menyisakan ruang kosong di ujung, center menaruh sisa ruang di dua ujung sama besar, dan space-between menempelkan item pertama ke awal serta item terakhir ke ujung lalu membagi sisa ruang ke celah di antaranya. Kalau tidak ada sisa ruang, ketiga nilai itu terlihat sama.
Properti gap menerima satu atau dua nilai: gap: 16px memberi jarak sama ke dua arah, sedangkan gap: 12px 24px berarti jarak antarbaris 12px dan jarak antarkolom 24px. Berbeda dari margin, gap hanya muncul di antara item dan tidak menambah ruang di tepi luar container.
Nilai bawaan flex-wrap adalah nowrap: semua item dipaksa muat dalam satu baris dan menyempit. Dengan wrap, item yang tidak muat pindah ke baris berikutnya, dan gap tetap berlaku untuk jarak antarbaris.
